@use "../../style/variables" as *;

$tab-prefix: #{$prefix}-tabs;

.#{$tab-prefix} {
  position: relative;
  font-size: var(--ty-tabs-font-size, var(--ty-font-size-base));
  color: var(--ty-tabs-color, var(--ty-color-text));

  &__nav {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: var(--ty-tabs-nav-margin, 16px);

    &::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      border-bottom: 1px solid var(--ty-tabs-border, var(--ty-color-fill-tertiary));
    }
  }

  &__nav-wrap {
    position: relative;
    overflow: hidden;
    flex: 1;
  }

  &__nav-list {
    display: flex;
    position: relative;
    transition: transform 0.3s;
  }

  &__tab {
    display: flex;
    align-items: center;
    padding: var(--ty-tabs-tab-padding-block-md, 12px) 0;
    margin: 0 var(--ty-tabs-tab-gap, 32px) 0 0;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    user-select: none;
    color: var(--ty-tabs-tab-color, var(--ty-color-text));
    transition: color 0.3s;

    &:hover {
      color: var(--ty-tabs-tab-hover-color, var(--ty-color-primary-text-hover));
    }

    &_active {
      color: var(--ty-tabs-tab-active-color, var(--ty-color-primary));
      font-weight: var(--ty-tabs-tab-active-font-weight, 500);
    }

    &_disabled {
      color: var(--ty-tabs-tab-disabled-color, var(--ty-color-text-quaternary));
      cursor: not-allowed;

      &:hover {
        color: var(--ty-tabs-tab-disabled-color, var(--ty-color-text-quaternary));
      }
    }

    &-icon {
      margin-right: var(--ty-tabs-icon-gap, 8px);
    }

    &-remove {
      margin-left: var(--ty-tabs-remove-gap, 8px);
      font-size: var(--ty-tabs-remove-font-size, 12px);
      color: var(--ty-tabs-remove-color, var(--ty-color-text-tertiary));
      cursor: pointer;
      transition: color 0.3s;

      &:hover {
        color: var(--ty-tabs-remove-color-hover, var(--ty-color-text));
      }
    }
  }

  &__ink-bar {
    position: absolute;
    bottom: 0;
    height: var(--ty-tabs-ink-bar-height, 2px);
    background: var(--ty-tabs-ink-bar-color, var(--ty-color-primary));
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
      width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    pointer-events: none;
  }

  &__content {
    position: relative;
    overflow: hidden;
    width: 100%;
  }

  &__content-inner {
    display: flex;
    width: 100%;

    &_animated {
      transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }

    &_static {
      display: block;
    }
  }

  &__panel {
    flex-shrink: 0;
    width: 100%;
    opacity: 0;
    height: 0;
    overflow: hidden;
    outline: none;

    &_active {
      opacity: 1;
      height: auto;
    }
  }

  &__nav-prev,
  &__nav-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ty-tabs-nav-button-size, 32px);
    height: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--ty-tabs-nav-button-font-size, 16px);
    color: var(--ty-tabs-nav-button-color, var(--ty-color-text-tertiary));
    transition: color 0.3s;
    flex-shrink: 0;

    &:hover {
      color: var(--ty-tabs-nav-button-color-hover, var(--ty-color-text));
    }
  }

  &__nav-btn_disabled {
    color: var(--ty-tabs-nav-button-color-disabled, var(--ty-color-text-quaternary));
    cursor: not-allowed;
  }

  &__nav-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ty-tabs-add-size, 32px);
    height: var(--ty-tabs-add-size, 32px);
    background: transparent;
    border: 1px dashed var(--ty-tabs-add-border-color, var(--ty-color-border));
    border-radius: var(--ty-tabs-add-radius, 4px);
    cursor: pointer;
    font-size: var(--ty-tabs-add-font-size, 14px);
    color: var(--ty-tabs-add-color, var(--ty-color-text-tertiary));
    margin-left: var(--ty-tabs-add-margin, 4px);
    flex-shrink: 0;
    transition: all 0.3s;

    &:hover {
      color: var(--ty-tabs-add-color-hover, var(--ty-color-primary));
      border-color: var(--ty-tabs-add-border-color-hover, var(--ty-color-primary));
    }
  }

  &__nav-extra_left,
  &__nav-extra_right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  &__nav-extra_left {
    margin-right: var(--ty-tabs-extra-gap, 16px);
  }

  &__nav-extra_right {
    margin-left: var(--ty-tabs-extra-gap, 16px);
  }

  &_sm &__tab {
    padding: var(--ty-tabs-tab-padding-block-sm, 8px) 0;
    font-size: var(--ty-tabs-size-sm, 13px);
  }

  &_lg &__tab {
    padding: var(--ty-tabs-tab-padding-block-lg, 16px) 0;
    font-size: var(--ty-tabs-size-lg, 15px);
  }

  &_card,
  &_editable-card {
    .#{$tab-prefix}__tab {
      padding: var(--ty-tabs-card-padding-block, 8px) var(--ty-tabs-card-padding-inline, 16px);
      margin: 0;
      background: var(--ty-tabs-card-bg, var(--ty-color-fill));
      border: 1px solid var(--ty-tabs-border, var(--ty-color-fill-tertiary));
      border-bottom: none;
      border-radius: var(--ty-tabs-card-radius, 4px) var(--ty-tabs-card-radius, 4px) 0 0;
      transition: all 0.3s;

      & + .#{$tab-prefix}__tab {
        margin-left: var(--ty-tabs-card-gap, 2px);
      }

      &_active {
        background: var(--ty-tabs-card-active-bg, var(--ty-color-bg-container));
        border-bottom-color: var(--ty-tabs-card-active-bg, var(--ty-color-bg-container));
      }
    }

    .#{$tab-prefix}__ink-bar {
      display: none;
    }
  }

  &_editable-card .#{$tab-prefix}__tab {
    padding-right: var(--ty-tabs-card-padding-inline-editable-end, 8px);
  }

  &_centered .#{$tab-prefix}__nav-list {
    justify-content: center;
  }

  &_bottom {
    .#{$tab-prefix}__nav {
      margin-bottom: 0;
      margin-top: var(--ty-tabs-nav-margin, 16px);

      &::before {
        top: 0;
        bottom: auto;
      }
    }

    .#{$tab-prefix}__ink-bar {
      top: 0;
      bottom: auto;
    }
  }

  &_left,
  &_right {
    display: flex;

    .#{$tab-prefix}__nav {
      flex-direction: column;
      margin-bottom: 0;

      &::before {
        inset: 0 0 0 auto;
        border-bottom: none;
        border-right: 1px solid var(--ty-tabs-border, var(--ty-color-fill-tertiary));
      }
    }

    .#{$tab-prefix}__nav-wrap {
      flex: none;
    }

    .#{$tab-prefix}__nav-list {
      flex-direction: column;
    }

    .#{$tab-prefix}__tab {
      margin: 0;
      padding-right: var(--ty-tabs-tab-gap, 32px);
    }

    .#{$tab-prefix}__ink-bar {
      width: var(--ty-tabs-ink-bar-height, 2px);
      height: auto;
      top: 0;
      right: 0;
      bottom: auto;
    }
  }

  &_left {
    .#{$tab-prefix}__content {
      padding-left: var(--ty-tabs-nav-margin, 16px);
    }
  }

  &_right {
    flex-direction: row-reverse;

    .#{$tab-prefix}__nav {
      &::before {
        right: auto;
        left: 0;
        border-right: none;
        border-left: 1px solid var(--ty-tabs-border, var(--ty-color-fill-tertiary));
      }
    }

    .#{$tab-prefix}__content {
      padding-right: var(--ty-tabs-nav-margin, 16px);
    }

    .#{$tab-prefix}__ink-bar {
      right: auto;
      left: 0;
    }
  }
}