@use '/src/styles/typography';
@use '/src/styles/mixins';

.tab {
  @include typography.font-style(core, base);

  color: var(--cl-primary-color);
  background: transparent;
  outline: none;
  border: none;
  padding: var(--cl-m-gap);
  cursor: pointer;
  flex: 1;
  border-radius: var(--cl-border-radius);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

  &:focus-visible {
    outline: var(--cl-outline-border);
    outline-offset: -4px;
  }

  &_wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cl-l-gap);
    border-radius: var(--cl-border-radius);
    border: var(--cl-light-border);
    background-color: var(--cl-primary-background);

    &__selected {
      top: var(--cl-xs-gap);
      box-shadow: var(--cl-box-shadow);
      border: var(--cl-primary-border);
    }

    &__vertical {
      &.tab_wrapper__selected {
        top: 0;
        left: var(--cl-xs-gap);
      }
    }

    &__stretched {
      flex: 1;
    }

    &__disabled {
      @include mixins.disabled();
    }

    &__inactive {
      opacity: 0.7;

      &:hover {
        opacity: 1;
      }
    }
  }

  &_buttons {
    margin-right: var(--cl-s-gap);
    display: flex;
    align-items: center;
    gap: 0;
  }
}
