import styled from 'styled-components'; interface DisplayPropType { show?: false | true; } interface ActivePropType { active?: false | true; } 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: 90%; border: 1px solid; background-color: ${({ theme }) => theme.colors.background}; padding: 0.2rem 0.5rem; cursor: pointer; color: ${({ theme }) => theme.colors.primary}; &:hover { color: ${({ theme }) => theme.colors.secondary}; } &:focus { color: ${({ theme }) => theme.colors.secondary}; } ` export const ThemeDropDownOptions = styled.div` position: absolute; color: ${({ theme }) => theme.colors.primary}; background-color: ${({ theme }) => theme.colors.background}; display: ${ props => props.show ? "flex" : "none" }; flex-direction: column; min-width: 160px; z-index: 1; ` export const ThemeDropDownOption = styled.button` color: ${ props => props.active ? ({ theme }) => theme.colors.secondary : ({ theme }) => theme.colors.primary }; background-color: ${({ theme }) => theme.colors.background}; border: 1px solid; padding: 0.2rem 0.5rem; text-decoration: none; &:hover { color: ${({ theme }) => theme.colors.secondary}; } `