import { colors, theme } from "data/dataMx";
import styled from "styled-components";

interface ITabContainerStylesProps {
  tabWidth: string;
  tabHeight: string;
  borderColor: colors;
  isSelected: boolean;
  isSubMenu: boolean;
  space: string;
}

export const TabMenuContainer = styled.div`
  display: flex;
  align-items: center;
`;
export const TabContainer = styled.div`
  width: ${({ tabWidth }: ITabContainerStylesProps) => tabWidth};
  height: ${({ tabHeight }: ITabContainerStylesProps) => tabHeight};
  display: flex;
  border-color: ${({ borderColor, isSelected }: ITabContainerStylesProps) =>
    isSelected ? borderColor : theme.transparent};
  border-bottom-style: solid;
  border-bottom-width: ${({ isSubMenu }: ITabContainerStylesProps) =>
    isSubMenu ? "4px" : "2px"};
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: ${({ space }: ITabContainerStylesProps) => space};
`;

export const TabMenuParent = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
`;
