import styled, { css } from "styled-components";
import { getTextSizes, palette, textLevels } from "../../design-system/tokens";

export const tabsCss = css`
  .ant-tabs-tab {
    color: ${palette.blackNormal};
    padding: 5px 0;
  }

  .ant-tabs-tab-active {
    color: ${palette.orangeNormal};

    .counter {
      background: ${palette.orangeNormal};
    }
  }
  .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
    color: ${palette.orangeNormal};
    text-shadow: none;
  }

  .ant-tabs-ink-bar {
    height: 4px;
    background: ${palette.orangeNormal} !important;
  }

  .ant-tabs > .ant-tabs-nav,
  .ant-tabs > div > .ant-tabs-nav {
    position: static;
    display: flex;
    flex: none;
    align-items: center;
  }

  .ant-tabs-content-holder {
    ${getTextSizes(textLevels.SPAN)};
  }

  ${getTextSizes(textLevels.H4)};
`;

export const BadgeTab = styled.div`
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: relative;

  & > span + span {
    position: absolute;
    display: inline-block;
    background: ${palette.blackNormal};
    color: ${palette.white};
    padding: 0px 2px;
    font-size: 9px;
    border-radius: 2px;
    line-height: 9px;
    right: -20px;
    top: -1px;
  }
`;