import styled from "styled-components";
import { Box, Typography } from "@mui/material";
import { ReactComponent as DropdownDown } from "../../../../../../assets/images/svg/down-arrow.svg";
import selectedTheme from "../../../../../../themes";

export const SmallDropdownContainer = styled(Box)`
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  margin-left: -20px;
  margin-bottom: 14px;
`;

export const SmallDropdownText = styled(Typography)`
  font-family: ${selectedTheme.fonts.textFont};
  font-size: 12px;
`;

export const SmallDropdownIcon = styled(DropdownDown)`
  width: 12px;
  ${(props) =>
    props.firstDropdown &&
    `
    transform: rotate(180deg);
  `}
  ${(props) =>
    props.secondDropdown &&
    `
    transform: rotate(180deg);
  `}
    ${(props) =>
    props.thirdDropdown &&
    `
    transform: rotate(180deg);
  `}
`;

export const SmallDropdownContent = styled(Box)`
  display: ${(props) =>
    props.firstDropdown || props.secondDropdown || props.thirdDropdown
      ? "block"
      : "none"};
`;
