@use "../../../1-settings/class-vars";

#{class-vars.$base-class} {
  .tab-group {
    &__list {
      display: flex;
      justify-content: space-evenly;
      &.tab-group--small-text .tab-group__tab-button {
        font-size: var(--font-size);
      }
    }
    &__tab {
      flex: 1 1 auto;
      display: flex;
      justify-content: center;
      position: relative;
      &::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: var(--gray-color);
      }
      &--selected {
        &::after {
          height: 5px;
          bottom: -2px;
          border-radius: var(--radius-circle);
          background-color: var(--primary-color);
        }
      }
    }
    &__tab-button {
      border: none;
      font-size: var(--font-size-l);
      font-weight: var(--font-weight-semi-bold);
      background-color: transparent;
      margin: var(--spacing-xs) 0;
      &:hover {
        background-color: var(--hover-gray-color);
        color: inherit;
      }
      &--selected {
        color: var(--primary-color);
      }
    }
    &__panel {
      padding-top: var(--spacing);
      &--selected {
        display: block;
      }
      &:focus-visible {
        outline-offset: 2px;
      }
    }
    &--vertical {
      display: flex;
      .tab-group__list {
        flex-direction: column;
        margin-right: var(--spacing-l);
        justify-content: flex-start;
        padding-top: var(--spacing);
        position: relative;
        flex-shrink: 0;

        &:after {
          content: '';
          position: absolute;
          left: 0;
          bottom: 0;
          width: 1px;
          height: calc(100% - var(--spacing));
          background: var(--gray-color);
        }
      }
      .tab-group__tab {
        flex: 0;
        &:after {
          z-index: 2;
          width: 1px;
          height: 100%;
        }
        &--selected:after {
          bottom: 0;
          left: -2px;
          width: 5px;
          height: 100%;
        }
      }
    }
  }
}