@use '../mixins';

.discreet-tab {
  color: var(--fg-grey);
  cursor: pointer;
  display: inline-block;
  padding: 0.5em 0.75em;

  &:hover {
    text-decoration: underline;
  }

  &:not(&--has-radio):focus-visible,
  :focus-visible + &--has-radio {
    outline: 0.125rem solid currentColor;
    outline-offset: 0.125rem;
    position: relative;
  }

  &--active {
    @include mixins.discreet-tab-active;
  }
}