/* Mutually exclusive All/Favorites selection plus independent hover feedback. */
.hover-rail .rail-all,
.hover-rail .rail-favorites {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
  border-radius: 4px;
  transition: background-color 120ms ease, color 120ms ease;
}

.hover-rail .rail-all .rail-icon,
.hover-rail .rail-favorites .rail-icon {
  flex: 0 0 36px;
  margin: 0;
}

.hover-rail .rail-all .rail-label,
.hover-rail .rail-favorites .rail-label {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  line-height: 1;
}

.hover-rail .rail-all .rail-label {
  padding-right: 0;
}

.hover-rail .rail-favorites {
  gap: 4px;
  padding: 0 8px 0 2px;
}

.hover-rail:not(:is(:hover, :focus-within, .pinned)) .rail-all {
  justify-content: flex-start;
}

.hover-rail .rail-all:not(.selected) {
  background: transparent;
  color: #acc9eb;
}

.hover-rail .rail-all.selected,
.hover-rail .rail-favorites.selected {
  background: #3969a7;
  color: #fff;
}

.hover-rail .rail-all:hover,
.hover-rail .rail-all:focus-visible,
.hover-rail .rail-favorites:hover,
.hover-rail .rail-favorites:focus-visible {
  background: #3969a7;
  color: #fff;
}

.hover-rail .rail-all:hover .rail-icon,
.hover-rail .rail-all:focus-visible .rail-icon,
.hover-rail .rail-favorites:hover .rail-icon,
.hover-rail .rail-favorites:focus-visible .rail-icon {
  color: #fff;
}

:root[data-kc-theme="dark"] .hover-rail .rail-all:not(.selected) {
  background: transparent;
  color: #d1d1d1;
}

:root[data-kc-theme="dark"] .hover-rail .rail-all.selected,
:root[data-kc-theme="dark"] .hover-rail .rail-favorites.selected,
:root[data-kc-theme="dark"] .hover-rail .rail-all:hover,
:root[data-kc-theme="dark"] .hover-rail .rail-all:focus-visible,
:root[data-kc-theme="dark"] .hover-rail .rail-favorites:hover,
:root[data-kc-theme="dark"] .hover-rail .rail-favorites:focus-visible {
  background: #191919;
  color: #fff;
}

:root[data-kc-theme="dark"] .hover-rail .rail-all.selected .rail-icon,
:root[data-kc-theme="dark"] .hover-rail .rail-all:hover .rail-icon,
:root[data-kc-theme="dark"] .hover-rail .rail-all:focus-visible .rail-icon,
:root[data-kc-theme="dark"] .hover-rail .rail-favorites.selected .rail-icon,
:root[data-kc-theme="dark"] .hover-rail .rail-favorites:hover .rail-icon,
:root[data-kc-theme="dark"] .hover-rail .rail-favorites:focus-visible .rail-icon {
  color: #fff;
}

:root[data-kc-theme="dark"] .hover-rail .rail-favorites:hover,
:root[data-kc-theme="dark"] .hover-rail .rail-favorites:focus-visible {
  background: #191919;
  color: #fff;
}

:root[data-kc-theme="dark"] .hover-rail .rail-favorites:hover .rail-icon,
:root[data-kc-theme="dark"] .hover-rail .rail-favorites:focus-visible .rail-icon {
  color: #fff;
}