@use '../colors';

// @todo убрать вложенность по максимуму
.root {
  list-style-type: none;
  user-select: none;
  display: flex;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  li {
    display: block;
    margin: 0;
    &::before {
      content: none;
    }
  }
  &.stretch {
    justify-items: stretch;
    .item {
      width: 100%;
    }
  }
  &.view-clean,
  &.view-clean-underline {
    height: 32px;
    .item {
      color: colors.$basic-gray38;
      &.selected {
        position: relative;
        color: colors.$basic-gray87;
        &::before {
          content: '';
          position: absolute;
          height: 2px;
          margin: 0 -1px;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: colors.$basic-blue;
          border-top-left-radius: 4px;
          border-top-right-radius: 4px;
        }
      }
      &.disabled {
        color: colors.$basic-gray12;
      }
      &:not(.selected):not(.disabled):hover {
        cursor: pointer;
        color: colors.$basic-gray54;
      }
    }
  }
  &.view-clean-underline {
    height: 40px;
    position: relative;
    &::before {
      position: absolute;
      bottom: 0;
      content: '';
      height: 1px;
      width: 100%;
      background-color: colors.$basic-gray12;
    }
  }
  &.view-round {
    height: 40px;
    .item {
      color: colors.$basic-gray87;
      padding: 8px 16px;
      border-radius: 4px;
      background-color: colors.$basic-gray4;
      &.selected {
        background-color: colors.$basic-blue;
        color: colors.$basic-white;
      }
      &.disabled {
        color: colors.$basic-gray24;
      }
      &:not(.selected):not(.disabled):hover {
        cursor: pointer;
        background-color: colors.$basic-gray8;
      }
    }
  }
  &.gap-m {
    --tabs-gap: 24px;
  }
  &.gap-s {
    --tabs-gap: 16px;
  }
  .item {
    text-align: center;
    &:not(:last-child) {
      margin-right: var(--tabs-gap);
    }
  }
}