import styled from 'styled-components'; interface DisplayPropType { focus?: number, show?: number; } interface ActivePropType { active?: number; } export const ThemeDropDown = styled.div` margin-left: 1%; min-width: 180px; color: ${({ theme }) => theme.colors.primary}; ` export const ThemeDropDownButton = styled.button` width: 160px; border: 2px solid; border-radius: 5px; background-color: ${ props => props.focus ? ({ theme }) => theme.invertButtons ? theme.colors.secondary : theme.colors.background : ({ theme }) => theme.colors.background}; padding: 2px 6px; cursor: pointer; color: ${props => props.focus ? ({ theme }) => theme.invertButtons ? theme.colors.text ? theme.colors.text : theme.colors.primary : theme.colors.secondary : ({ theme }) => theme.colors.primary}; transition-property: color, border-bottom-left-radius, border-bottom-right-radius, background-color; transition-timing-function: ease; transition-duration: 0.15s; transition-delay: 0s, ${ props => props.show ? "0s, 0s" : "0.6s, 0.6s" }, 0s; &:focus,:hover { color: ${({ theme }) => theme.invertButtons ? theme.colors.text ? theme.colors.text : theme.colors.primary : theme.colors.secondary}; background-color: ${({ theme }) => theme.invertButtons ? theme.colors.secondary : theme.colors.background}; } 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-image: ${({ theme }) => theme.backgroundImage ? "linear-gradient(" + theme.colors.background + "," + theme.colors.background + "), url(" + theme.backgroundImage + ")" : ""}; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; 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-x: hidden; overflow-y: ${ props => props.show ? "scroll" : "hidden" }; scrollbar-width: none; 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: transparent; cursor: pointer; align-self: center; border: 0px solid; padding: 0.2rem 0.5rem; text-decoration: none; width: 90%; &:hover { color: ${({ theme }) => theme.colors.secondary}; } `