import styled from "styled-components";
export const Container = styled.div `
  display: flex;
  box-sizing: border-box;

  * {
    box-sizing: border-box;
  }

  background: ${({ theme }) => theme.new?.tabsSwitch?.background ?? "unset"};
  height: ${({ theme }) => theme.new?.tabsSwitch?.height ?? "unset"};
  width: ${({ theme }) => theme.new?.tabsSwitch?.width ?? "unset"};
  padding: ${({ theme }) => theme.new?.tabsSwitch?.padding ?? "unset"};
  box-shadow: ${({ theme }) => theme.new?.tabsSwitch?.boxShadow ?? "unset"};
  //overflow: hidden;
  border-radius: 6px;
`;
export const Item = styled.div `
  font-family: Bold;
  font-size: 14px;
  line-height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 100%;

  border-radius: ${({ theme }) => theme.new?.tabsSwitch?.itemBorderRadius ?? "unset"};
  color: ${({ theme }) => theme.new?.tabsSwitch?.color ?? "unset"};

  &.active {
    background: ${({ theme }) => theme.new?.tabsSwitch?.backgroundActive ?? "unset"};
    color: ${({ theme }) => theme.new?.tabsSwitch?.colorActive ?? "unset"};
    box-shadow: ${({ theme }) => theme.new?.tabsSwitch?.boxShadowActive ?? "unset"};
  }
`;
//# sourceMappingURL=tabs-switch.styled.js.map