// Section navigation

// Section switcher dropdown
.section-switcher {
  margin-top: 1.5rem;
  font-size: 0.75rem;

  // Common styles for hover, focus, active states
  %interactive-state {
    background-color: var(--sl-color-gray-6);
    border-color: var(--bs-border-color);
    color: inherit;
  }

  .dropdown-toggle {
    min-height: 44px;
    border: 1px solid var(--bs-border-color);
    background-color: inherit;
    color: inherit;
    transition: none;

    &:hover,
    &:focus,
    &:active,
    &.show {
      @extend %interactive-state;
    }
  }

  .dropdown-menu {
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    background-color: var(--sl-color-black);
    padding: 0.25rem;

    .dropdown-item {
      padding: 0.5rem;
      transition: none;
      color: inherit;
      border-radius: 0.375rem;

      &:hover,
      &.active,
      &.active:hover {
        @extend %interactive-state;
      }

      .icon {
        flex-shrink: 0;
      }
    }
  }
}

hr.section-divider {
  margin: 1.5rem -1rem -0.5rem;
  border-color: $gray-400;
}

@include color-mode(dark) {
  hr.section-divider {
    border-color: $border-color-dark;
  }
}

@include media-breakpoint-up(lg) {
  hr.section-divider {
    margin: 1.5rem -1.5rem -0.5rem;
    border-color: $gray-400;
  }
}