@use '../mixins';

.tab {
  background-color: var(--accent);
  border-bottom: solid 3px var(--accent-alt);
  color: var(--accent-fg);
  cursor: pointer;
  display: inline-block;
  padding: 0.5rem 0.75rem calc(0.5rem - 3px);

  &--active,
  .dropdown:not(.dropdown--js):focus-within > &.dropdown__toggle,
  .dropdown:not(.dropdown--js):hover > &.dropdown__toggle {
    @include mixins.tab-active;
  }
}