"use strict";

var __importDefault = this && this.__importDefault || function (mod) {
  return mod && mod.__esModule ? mod : {
    "default": mod
  };
};

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

const react_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)`
  /* todo - dropdown absolute positioning top/bottom */
  ${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;
    `};

  /* todo - dropdown border settings */
  ${props => props.isVisible === true && props.shouldBeAbsolute && styleh_components_1.styled.css`
      border-radius: 0 0 $border-radius $border-radius;
      border: $border-thin;
      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: $border-radius $border-radius 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: $border-thin;
  border-radius: $border-radius;

  ${props => props['aria-disabled'] && styleh_components_1.styled.css`
      ${styled_1.disabledStyles};
      border-color: lightgray;
    `};

  /* @too AfterText? */
  .arrow-up,
  .arrow-down {
    min-width: $spacing;
  }
`; //# sourceMappingURL=styled.js.map