"use strict";

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

const tslib_1 = require("tslib");

const react_1 = tslib_1.__importDefault(require("react"));

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

const ClickBoundary_1 = require("../../../features/ClickBoundary");

const OptionList_1 = require("../OptionList");

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

const ClickBoundaryAdapter = props => react_1.default.createElement(ClickBoundary_1.ClickBoundary, Object.assign({}, props, {
  className: `select-dropdown-wrap ${props.className}`
}));

exports.StyledOptionList = styleh_components_1.styled.withComponent(OptionList_1.OptionList)`${props => props.shouldBeAbsolute && styleh_components_1.styled.css`position:absolute;z-index:3;margin-left:-1px;width:calc(100% + 2px);left:0;top:95%;`};${props => props.dropDownAlignmentType === 'top' && props.shouldBeAbsolute && styleh_components_1.styled.css`bottom:95%;top:auto;`};${props => props.isVisible === true && props.shouldBeAbsolute && styleh_components_1.styled.css`border-radius:0 0 0.125rem 0.125rem;border:0.0625rem solid #A6AFC1;border-top:0;`};${props => props.isVisible === true && props.dropDownAlignmentType === 'top' && props.shouldBeAbsolute && styleh_components_1.styled.css`border-top:inherit;border-bottom:0;border-radius:0.125rem 0.125rem 0 0;`};`;
/**
 * @todo @fixme not sure why self attribute selectors do not work -.-
 * @todo use {Option} { color } instead of *
 * @todo remove arrow or do ^
 *
 * @todo probably don't use width & border here?
 * @description using hover + active allows for pointer-events + cursor
 */

exports.StyledClickBoundary = styleh_components_1.styled.withComponent(ClickBoundaryAdapter).attrs({
  'data-type': 'select-wrap',
  'data-qa': 'qa-dropdown'
})`position:relative;width:100%;height:100%;border:0.0625rem solid #A6AFC1;border-radius:0.25rem;${props => props['aria-disabled'] && styleh_components_1.styled.css`${styled_1.disabledStyles};border-color:lightgray;`};.arrow-up,.arrow-down{min-width:1rem;}`; //# sourceMappingURL=styled.js.map