button.btn.version-switcher__button {
  border-color: var(--pst-color-border);
  color: var(--pst-color-text-base);

  // Add a margin on narrow screens to avoid feeling cramped
  margin-bottom: 1em;

  @include media-breakpoint-up($breakpoint-sidebar-primary) {
    margin-bottom: unset;
  }

  &:hover {
    box-shadow: 0 0 0 $focus-ring-width var(--pst-color-secondary);
    border-color: transparent;
  }

  &:active {
    color: var(--pst-color-text-base);
    border-color: var(--pst-color-border);
  }

  &:focus-visible {
    border-color: transparent;
  }
}

.version-switcher__menu {
  border-color: var(--pst-color-border);
  border-radius: var(--bs-dropdown-border-radius);

  a.list-group-item {
    background-color: var(--pst-color-on-background);
    color: var(--pst-color-text-base);
    padding: 0.75rem 1.25rem;

    &:not(:last-child) {
      border-bottom: 1px solid var(--pst-color-border);
    }

    &:hover {
      @include link-style-hover;

      background-color: var(--pst-color-surface);
    }

    &.active {
      @include link-sidebar-current;

      position: relative;
      z-index: 1;

      span::before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: -1;
        left: 0;
        top: 0;
      }
    }

    &:focus-visible {
      z-index: 10; // keep focus ring on top (prevent the hover background of the next dropdown item from covering the ring)
    }
  }
}

// Font behavior on mobile
button.version-switcher__button,
.version-switcher__menu {
  font-size: 1.1em; // A bit smaller than other menu font
  z-index: $zindex-modal; // higher than the sidebars

  // Make sure it meets WCAG target size requirement no matter the version
  // string displayed in the button
  @include min-hit-area;

  @include media-breakpoint-up($breakpoint-sidebar-primary) {
    font-size: unset;
  }
}
