import styled from 'styled-components'; interface DisplayPropType { show?: number; } interface ActivePropType { active?: number; } export const ThemeDropDown = styled.div` margin-left: 1%; min-width: 180px; color: ${({ theme }) => theme.colors.primary} display: flex; flex-direction: column; ` export const ThemeDropDownButton = styled.button` width: 160px; border: 1px solid; border-radius: 5px; background-color: ${({ theme }) => theme.colors.background}; padding: 0.2rem 0.5rem; cursor: pointer; color: ${({ theme }) => theme.colors.primary}; transition-property: color, border-bottom-left-radius, border-bottom-right-radius; transition-timing-function: ease; transition-duration: 0.15s; transition-delay: 0s, ${ props => props.show ? "0s, 0s" : "0.6s, 0.6s" }; &:focus,:hover { color: ${({ theme }) => theme.colors.secondary}; } border-bottom-left-radius: ${ props => props.show ? "0" : "" }; border-bottom-right-radius: ${ props => props.show ? "0" : "" }; ` export const ThemeDropDownOptions = styled.div` position: absolute; color: ${({ theme }) => theme.colors.primary}; background-color: ${({ theme }) => theme.colors.background}; display: flex; flex-direction: column; min-width: 160px; border: 1px solid; border-top: 0; border-radius: 5px; border-top-left-radius: 0px; border-top-right-radius: 0px; z-index: 1; overflow: hidden; max-height: ${ props => props.show ? "20%" : "0%" }; visibility: ${ props => props.show ? "visible" : "hidden" }; transition-property: max-height, visibility; transition-timing-function: ease-in-out; transition-duration: 0.6s, 0s; transition-delay: 0s, ${ props => props.show ? "0s" : "0.5s" }; ` export const ThemeDropDownOption = styled.button` color: ${ props => props.active ? ({ theme }) => theme.colors.secondary : ({ theme }) => theme.colors.primary }; background-color: ${({ theme }) => theme.colors.background}; cursor: pointer; align-self: center; border: 0px solid; padding: 0.2rem 0.5rem; text-decoration: none; width: 90%; &:hover { color: ${({ theme }) => theme.colors.secondary}; } `