@difizen/mana-react/lib/tabs/styles/card.less

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


@tab-prefix-cls: ~'@{mana-prefix}-tabs';

.@{tab-prefix-cls}-card {
  > .@{tab-prefix-cls}-nav,
  > div > .@{tab-prefix-cls}-nav {
    .@{tab-prefix-cls}-tab {
      margin: 0;
      padding: 4px 4px 4px 8px;
      background-color: var(--mana-tab-inactiveBackground);
      border-top: none;
      border-right: 1px solid var(--mana-tab-border);
      border-bottom: none;
      box-sizing: border-box;
      height: 31px;
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

      &-active {
        color: var(--mana-primary-color);
        background-color: var(--mana-tab-activeBackground);
        border-top: 1px solid var(--mana-tab-activeBorder);

        .mana-tabs-tab-btn {
          color: var(--mana-tab-activeForeground);
          text-shadow: none;
        }
      }

      &-tab-btn {
        color: var(--mana-tab-inactiveForeground);
      }
    }

    .@{tab-prefix-cls}-ink-bar {
      visibility: hidden;
    }
  }

  // ========================== Top & Bottom ==========================
  &.@{tab-prefix-cls}-top,
  &.@{tab-prefix-cls}-bottom {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
        margin-left: 0;
      }
    }
  }

  &.@{tab-prefix-cls}-top {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      .@{tab-prefix-cls}-tab {
        border-radius: 0;

        &-active {
          border-bottom-color: var(--mana-color-bg-container);
        }
      }
    }
  }
  &.@{tab-prefix-cls}-bottom {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      .@{tab-prefix-cls}-tab {
        border-radius: 0 0 2px 2px;

        &-active {
          border-top-color: var(--mana-color-bg-container);
        }
      }
    }
  }

  // ========================== Left & Right ==========================
  &.@{tab-prefix-cls}-left,
  &.@{tab-prefix-cls}-right {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
        margin-top: 0;
      }
    }
  }

  &.@{tab-prefix-cls}-left {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      .@{tab-prefix-cls}-tab {
        border-radius: 2px 0 0 2px;

        &-active {
          border-right-color: var(--mana-color-bg-container);
        }
      }
    }
  }
  &.@{tab-prefix-cls}-right {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      .@{tab-prefix-cls}-tab {
        border-radius: 0 2px 2px 0;

        &-active {
          border-left-color: var(--mana-color-bg-container);
        }
      }
    }
  }
}