@use "mixins/mixins" as *;
@use "common/var" as *;
@use "mixins/function.scss" as *;
@use "mixins/config" as *;

@include b(tabs) {
  display: flex;
  flex-direction: column;
  @include e(nav) {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid getCssVar("border-color", "light");
    position: relative;
  }
  @include e(item) {
    position: relative;
    top: 1px;
    margin-right: 1.2em;
    margin-top: 1px;
    padding: 0.4em 0.5em;
    height: 1.8em !important;
    line-height: 1.8em !important;
    text-align: center;
    cursor: pointer;
    font-size: getCssVar("font-size", "base");
    @include when(active) {
      color: getCssVar("color-primary");
      border-bottom: 2px solid getCssVar("color-primary");
    }
  }

  @include e(content) {
    height: auto;
    padding: 0.8em;
    font-size: getCssVar("font-size", "base");
  }
  @include m(card) {
    .#{$namespace}-tabs__nav {
      border-left: 1px solid getCssVar("border-color", "light");
    }
    .#{$namespace}-tabs__item {
      border-top: 1px solid getCssVar("border-color", "light");
      border-right: 1px solid getCssVar("border-color", "light");
      margin: 0;
      top: 0;
      padding: 0.4em 1.2em;
      &.is-active {
        color: getCssVar("color-primary");
        border-bottom: unset;
      }
    }
  }
  @include m(border-card) {
    border: 1px solid getCssVar("border-color", "light");
    .#{$namespace}-tabs__nav {
    }
    .#{$namespace}-tabs__item {
      margin: 0;
      top: 0;
      padding: 0.4em 1.2em;
      &.is-active {
        border-right: 1px solid getCssVar("border-color", "light");
        &:not(:first-child) {
          border-left: 1px solid getCssVar("border-color", "light");
        }

        background-color: $color-white;
        color: getCssVar("color-primary");
        border-bottom: unset;
        top: 1px !important;
      }
    }
  }
}