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

@include respond-to('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 12px;
    }
  }
  .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 8px;
    }
  }
  .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;
    }
  }
}

@include respond-to('<=pad') {
  .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 8px;
    }
  }
  .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 2px;
    }
    .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;
    }
  }
}