@use "system/colors";
@use "system/spacing";
@use "system/typography";
@use "system/states";

.ods-tabs {
  &__label {
    @extend %ods-text--size-kilo, %ods-text--size-hotel-breakpoint-medium;
    @extend %ods-margin-bottom-3;
  }

  &__triggers {
    @extend %ods-margin-bottom-3;
  }

  &__trigger {
    @extend %ods-text--size-lima;
    @extend %ods-text--weight-medium;
    @extend %ods-margin-right-3;

    border: none;
    background: transparent;
    border-bottom: 0.125rem solid colors.$gray;
    cursor: pointer;
    padding: 0;
    text-align: center;

    &:hover {
      border-bottom: 0.125rem solid states.$hover;
      color: states.$hover;
    }

    &:focus-visible {
      box-shadow: 0 0 0 0.125rem colors.$blue-state;
      outline-offset: 0.125rem;
      outline: 0.25rem solid colors.$purple-light;
    }

    &[aria-selected="true"] {
      border-bottom: 2px solid colors.$blue-dark;
    }
  }

  &__tab {
    display: none;

    &--active {
      display: block;
    }
  }
}