// If unset, default to the "mobile" height of the slim header.
$minimap-top-offset: var(--offset-top, calc(theme('spacing.slim-header') * 2));
$minimap-width: 260px;
$minimap-collapsed-width-mobile: 20px;
$minimap-collapsed-width: 30px;
$minimap-overflow: theme('spacing.2');
$minimap-z-index: calc(theme('zIndex.header') - 20);

@import './CollapseAll';
@import './MinimapItem';

.w-minimap {
  position: absolute;
  top: $minimap-top-offset;
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 100%);
  z-index: $minimap-z-index;
  width: $minimap-width;
  transform: translateX(
    calc(var(--w-direction-factor) * (100% - $minimap-collapsed-width-mobile))
  );

  @include media-breakpoint-up(sm) {
    transform: translateX(
      calc(var(--w-direction-factor) * (100% - $minimap-collapsed-width))
    );
  }

  .side-panel-open & {
    inset-inline-end: var(--side-panel-width, 0);
  }

  &--expanded {
    transform: translateX(0);
    // Take up the whole height so overlap with the page looks better.
    height: calc(100vh - $minimap-top-offset);
    // Only transition when opening, so the closing animation doesn’t interfere with "hover to open".
    transition: transform 0.3s ease;
  }

  > * {
    // Set the background on the contents of the minimap only to reduce overlapping area with fields and comments.
    background-color: theme('colors.surface-page');
  }
}

.w-minimap__toggle {
  // Keep the icon at a stable position and reduce the amount of shifting of the button.
  display: inline-flex;
  padding: theme('spacing.[0.5]');
  background-color: theme('colors.surface-page');
  color: theme('colors.icon-primary');
  transform: rotate(180deg);
  // Expand is available for keyboard users only.
  opacity: 0;
  pointer-events: none;

  @include media-breakpoint-up(sm) {
    margin-top: theme('spacing.9');
    padding: theme('spacing.[1.5]');

    *:focus {
      opacity: 1;
      pointer-events: auto;
    }

    // Ensure the toggle button is only visible when it has **focus-visible**.
    // With fallback focus styles for browsers that lack focus-visible support.
    *:focus:not(:focus-visible) {
      opacity: 0;
      pointer-events: none;
    }

    &:focus-visible {
      opacity: 1;
      pointer-events: auto;
    }
  }

  .icon {
    width: theme('spacing.4');
    height: theme('spacing.4');
  }

  :where(.w-minimap--expanded) & {
    opacity: 1;
    pointer-events: auto;
    margin-top: theme('spacing.3');
    margin-inline-start: theme('spacing.3');
    padding: theme('spacing.3');
    transform: rotate(0deg);
  }
}

.w-minimap__header {
  min-height: 70px;

  :where(.w-minimap--expanded) & {
    margin-inline-start: $minimap-overflow;
    border-inline-start: 1px solid theme('colors.border-furniture');
  }
}

.w-minimap__list {
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  list-style-type: none;

  :where(.w-minimap--expanded) & {
    padding-inline-start: $minimap-overflow;
  }

  > li {
    display: flex;
  }
}

.w-minimap__footer {
  flex-grow: 1;

  :where(.w-minimap--expanded) & {
    margin-inline-start: $minimap-overflow;
    border-inline-start: 1px solid theme('colors.border-furniture');
  }
}
