@import '../../styles/variables.scss';

.seg-tabs {
  display: flex;
  align-items: center;

  &--underline {
    border-bottom: 1px solid $bd-l;

    .seg-tab {
      flex: 1;
      height: var(--tk-touch-min);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      &--active {
        .seg-tab__text {
          color: var(--tk-pri);
          font-weight: bold;
        }

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 30%;
          right: 30%;
          height: 4px;
          background: var(--tk-pri);
          border-radius: $r-xs;
        }
      }
    }

    .seg-tab__text {
      font-size: var(--tk-font-body-lg);
      color: $tx2;
    }
  }

  &--pill {
    gap: 8px;
    margin-bottom: var(--tk-section-gap);

    .seg-tab {
      flex: 1;
      height: 44px;
      border-radius: $r-sm;
      background: $surface-alt;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;

      &--active {
        background: var(--tk-pri);
        box-shadow: var(--tk-shadow-tab);

        .seg-tab__text {
          color: $white;
          font-weight: 600;
        }
      }
    }

    .seg-tab__text {
      font-size: 15px;
      font-weight: 600;
      color: $tx2;
    }
  }
}