@use '../mixins/text-mixins' as text-mixins;

.tab {
  border-bottom: 2px solid transparent;
  cursor: pointer;
  display: inline-flex;
  margin-left: var(--input-padding-x);
  margin-right: var(--input-padding-x);
  padding-bottom: var(--input-padding-y);
  padding-top: var(--input-padding-y);
  scroll-margin-left: var(--input-padding-x);
  scroll-margin-right: var(--input-padding-x);
  scroll-snap-align: start;

  @include text-mixins.hover {
    border-bottom-color: inherit;
  }

  @include text-mixins.hover-and-focus {
    text-decoration: none;
  }

  &.active {
    border-bottom: 2px solid;
    pointer-events: none;
  }
}