"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

const styleh_components_1 = require("styleh-components");

const Animations_1 = require("../../../features/Animations");

const styled_1 = require("../meta/styled");

exports.StyledOption = styleh_components_1.styled.div`${Animations_1.snapback + ''};width:100%;align-items:center;display:flex;font-size:0.8125rem;color:var(--color-dark-grey);> span{color:inherit;}&:last-child{order:-1;}span{color:var(--color-black);}height:auto;padding:0.5rem 1rem;cursor:pointer;user-select:none;background:transparent;${props => props.isSelected && styleh_components_1.styled.css`background:#efefef;`};transition:background 0.48s,color 0.12s,padding 0.24s,margin 0.24s;transition-timing-function:cubic-bezier(0.4,0,0.2,1);animation-duration:0.48s;animation-direction:alternate;animation-fill-mode:forwards;&:hover{background:var(--color-blue);color:white;animation:snapback;.text{color:var(--color-pure-white);}}${props => props.isDisabled && styled_1.disabledStyles};${props => props.isDisabled && styleh_components_1.styled.css`color:lightgray;> button,> span,> a,> div{color:lightgray;}&:hover{color:lightgray;.text{color:lightgray;}}`};`;
/**
 * @todo use `atoms/Text`
 */

exports.SelectText = styleh_components_1.styled.span.attrs({
  className: 'text'
})`letter-spacing:0;font:400 1.125rem "Roboto",Arial,Helvetica,sans-serif;@media (max-width:1023px){font:400 1rem "Roboto",Arial,Helvetica,sans-serif;}@media (max-width:767px){font:400 0.875rem "Roboto",Arial,Helvetica,sans-serif;}`; //# sourceMappingURL=styled.js.map