@use '../../_styles/mixin.scss' as *;

@include respond('<=laptop') {
  .o-tab-large {
    --tab-nav-text-size: var(--o-font_size-text2);
    --tab-nav-text-height: var(--o-line_height-text2);
    --tab-nav-icon-size: var(--o-icon_size_control-m);
    --tab-nav-gap: 32px;
    &.o-tab-text {
      --tab-nav-padding: 0 0 16px;
    }
  }
  .o-tab-medium {
    --tab-nav-text-size: var(--o-font_size-text1);
    --tab-nav-text-height: var(--o-line_height-text1);
    &.o-tab-text {
      --tab-nav-padding: 0 0 10px;
    }
  }
  .o-tab-small {
    --tab-nav-text-size: var(--o-font_size-tip1);
    --tab-nav-text-height: var(--o-line_height-tip1);
    --tab-nav-icon-size: var(--o-icon_size_control-s);
    --tab-nav-gap: 24px;
    &.o-tab-text {
      --tab-nav-padding: 0 0 4px;
    }
  }

  .o-tab-button {
    &.o-tab-large {
      --tab-nav-text-size: var(--o-font_size-text1);
      --tab-nav-text-height: var(--o-line_height-text1);
      --tab-nav-icon-size: var(--o-icon_size-s);
      --tab-nav-padding: 4px 16px;

      .o-tab-nav:has(.o-icon:only-child) {
        --tab-nav-padding: 6px 6px;
      }
    }
    &.o-tab-medium,
    &.o-tab-small {
      --tab-nav-padding: 1px 16px;

      .o-tab-nav:has(.o-icon:only-child) {
        --tab-nav-padding: 3px 3px;
      }
    }
  }
}

@include respond('<=pad_v') {
  .o-tab-large {
    --tab-nav-text-size: var(--o-font_size-tip1);
    --tab-nav-text-height: var(--o-line_height-tip1);
    --tab-nav-icon-size: var(--o-icon_size_control-s);
    --tab-nav-gap: 16px;
    --tab-nav-anchor-height: 1px;

    &.o-tab-text {
      --tab-nav-padding: 0 0 3px;
    }
  }
  .o-tab-medium {
    --tab-nav-text-size: var(--o-font_size-tip1);
    --tab-nav-text-height: var(--o-line_height-tip1);
    --tab-nav-gap: 16px;
    &.o-tab-text {
      --tab-nav-padding: 0 0 4px;
    }
    .o-tab-nav-anchor-line {
      width: 16px;
    }
  }
  .o-tab-small {
    --tab-nav-text-size: var(--o-font_size-tip1);
    --tab-nav-text-height: var(--o-line_height-tip1);
    --tab-nav-gap: 12px;
    &.o-tab-text {
      --tab-nav-padding: 0 0 2px;
    }

    .o-tab-nav-anchor-line {
      width: 16px;
    }
  }

  .o-tab-button {
    &.o-tab-large {
      --tab-nav-text-size: var(--o-font_size-tip1);
      --tab-nav-text-height: var(--o-line_height-tip1);
      --tab-nav-icon-size: var(--o-icon_size-xs);
      --tab-nav-padding: 3px 16px;
      --tab-nav-list-padding: 2px;
    }
    &.o-tab-medium,
    &.o-tab-small {
      .o-tab-nav:has(.o-icon:only-child) {
        --tab-nav-padding: 4px 4px;
      }
    }
  }
}