trampa-frontend/src/components/Dropdown/DropdownList/DropdownList.styled.js

import { Box, Typography } from "@mui/material";
import styled from "styled-components";
import { PRIMARY_PURPLE_COLOR } from "../../../constants/stylesConstants";
import { Icon } from "../../Icon/Icon";

export const ComponentContainer = styled(Box)`

    width: ${props => props.fullWidth ? '100%' : (props.width ? props.width : '250px')};
    padding: 8px;
`

export const DropdownTitle = styled(Typography)`
    display: flex;
    flex: 1;
    cursor: pointer;
    padding-left: 9px;
    font-size: 18px;
    font-weight: 100;
    padding-bottom: 10px;
`

export const ToggleIconOpened = styled(Icon)`
    cursor: pointer;
    color: ${PRIMARY_PURPLE_COLOR};
`

export const ToggleIconClosed = styled(Icon)`
    cursor: pointer;
    color: ${PRIMARY_PURPLE_COLOR};
`

export const DropdownIcon = styled(Icon)`
    font-size: 24px !important;

    & span {
        font-size: 24px;
        & svg {
            font-size: 24px;
        }
    }
`

export const ListContainer = styled(Box)`
    padding-left: 15px;
    display: ${props => props.shouldShow ? "block" : "none"};
`

export const DropdownHeader = styled(Box)`
    display: flex;
    flex-direction: row;
`