.us-tabs__wrapper {
  display: flex;
}
.us-tabs__container {
  display: flex;
  align-items: center;
  width: 100%;
}
.us-tabs__container_full {
  width: 100%;
  .us-tab {
    flex: 1 1 auto;
    justify-content: center;
  }
}
.us-tabs__container_fit {
  width: fit-content;
}

.us-tab {
  display: flex;
  align-items: center;
  height: 100%;
  cursor: pointer;
  user-select: none;

  &.us-tab_disabled {
    cursor: default;
  }
  & .us-tab__icon_space {
    margin-right: var(--space-inline-m);
  }
  /* line */
  &_line {
    padding: var(--tabs-line-v-padding) 0;
    font: var(--text-p-m-heavy);
    color: var(--tabs-line-color);
    position: relative;
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      width: 100%;
      left: 0;
      border-bottom: var(--tabs-line-border-bottom);
    }
    & .us-tab__icon {
      color: var(--tabs-line-icon-color);
    }
    &:not(:last-child) {
      margin-right: var(--space-inline-xl);
    }
    &:hover {
      color: var(--tabs-line-hover-color);
      & .us-tab__icon {
        color: var(--tabs-line-hover-icon-color);
      }
      &::after {
        border-bottom: var(--tabs-line-hover-border-bottom);
      }
    }
    &.us-tab_selected {
      color: var(--tabs-line-active-color);
      & .us-tab__icon {
        color: var(--tabs-line-active-icon-color);
      }
      &::after {
        border-bottom: var(--tabs-line-active-border-bottom);
      }
    }
    &.us-tab_disabled {
      color: var(--tabs-line-disabled-color);
      & .us-tab__icon {
        color: var(--tabs-line-disabled-icon-color);
      }
      &::after {
        border-bottom: var(--tabs-line-disabled-border-bottom);
      }
    }
  }
  /* pill */
  &_pill {
    &.us-tab_sm {
      padding-bottom: calc(var(--tabs-pill-s-v-padding) - 1px);
      padding-top: calc(var(--tabs-pill-s-v-padding) - 1px);
      font: var(--text-p-s-heavy);
    }
    &.us-tab_lg {
      padding-bottom: calc(var(--tabs-pill-l-v-padding) - 1px);
      padding-top: calc(var(--tabs-pill-l-v-padding) - 1px);
      font: var(--text-p-m-heavy);
    }
    padding-right: var(--tabs-pill-h-padding);
    padding-left: var(--tabs-pill-h-padding);
    &:first-child {
      border-radius: var(--tabs-pill-border-radius) 0 0 var(--tabs-pill-border-radius);
    }
    &:last-child {
      border-radius: 0 var(--tabs-pill-border-radius) var(--tabs-pill-border-radius) 0;
    }
    color: var(--tabs-pill-color);
    background: var(--tabs-pill-background);
    border: 1px solid var(--tabs-pill-border-color);
    & .us-tab__icon {
      color: var(--tabs-pill-icon-color);
    }
    &:hover {
      color: var(--tabs-pill-hover-color);
      background: var(--tabs-pill-hover-background);
      border-color: var(--tabs-pill-hover-border-color);
      & .us-tab__icon {
        color: var(--tabs-pill-hover-icon-color);
      }
    }
    &.us-tab_selected {
      color: var(--tabs-pill-active-color);
      background: var(--tabs-pill-active-background);
      border-color: var(--tabs-pill-active-border-color);
      & .us-tab__icon {
        color: var(--tabs-pill-active-icon-color);
      }
    }
    &.us-tab_disabled {
      color: var(--tabs-pill-disabled-color);
      background: var(--tabs-pill-disabled-background);
      border-color: var(--tabs-pill-disabled-border-color);
      & .us-tab__icon {
        color: var(--tabs-pill-disabled-icon-color);
      }
    }

    &.us-tab_padding-without-name {
      padding-top: var(--space-inner-m);
      padding-bottom: var(--space-inner-m);
    }
    
    &:not(:first-child) {
      border-left: none;
    }
  }

  /* folder */
  &_folder {
    padding: calc(var(--tabs-folder-v-padding) - 1px) var(--tabs-folder-h-padding);
    border-radius: var(--tabs-folder-border-radius) var(--tabs-folder-border-radius) 0 0;
    color: var(--tabs-folder-color);
    background: var(--tabs-folder-background);
    border: 1px solid var(--tabs-folder-border-color);
    font: var(--text-p-m-heavy);
    &:not(:last-child) {
      margin-right: var(--space-inline-s);
    }
    & .us-tab__icon {
      color: var(--tabs-folder-icon-color);
    }
    &:hover {
      color: var(--tabs-folder-hover-color);
      background: var(--tabs-folder-hover-background);
      border-color: var(--tabs-folder-hover-border-color);
      outline: none;
      & .us-tab__icon {
        color: var(--tabs-folder-hover-icon-color);
      }
    }
    &.us-tab_selected {
      color: var(--tabs-folder-active-color);
      background: var(--tabs-folder-active-background);
      border-color: var(--tabs-folder-active-border-color);
      border-bottom-color: transparent;
      & .us-tab__icon {
        color: var(--tabs-folder-active-icon-color);
      }
    }
    &.us-tab_disabled {
      color: var(--tabs-folder-disabled-color);
      background: var(--tabs-folder-disabled-background);
      border-color: var(--tabs-folder-disabled-border-color);
      & .us-tab__icon {
        color: var(--tabs-folder-disabled-icon-color);
      }
    }
  }
}