"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 view_container_1 = require("view-container");
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}` })));
// @todo
// ${ArrowIcon} {
//   fill: lightgray;
// }
exports.StyledOptionList = view_container_1.styled.withComponent(OptionList_1.OptionList) `

  /* todo - dropdown absolute positioning top/bottom */
  ${props => props.shouldBeAbsolute &&
    view_container_1.styled.css `
      position: absolute;
      z-index: 1;
      margin-left: -1px;
      width: calc(100% + 2px);
      left: 0;
      top: 95%;
    `};

  ${props => props.dropDownAlignmentType === 'top' &&
    props.shouldBeAbsolute &&
    view_container_1.styled.css `
      bottom: 95%;
      top: auto;
    `};

  /* todo - dropdown border settings */
  ${props => props.isVisible === true &&
    props.shouldBeAbsolute &&
    view_container_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 &&
    view_container_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 = view_container_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'] && view_container_1.styled.css `
    ${_styled_1.disabledStyles};
    border-color: lightgray;
  `};

  /* @too AfterText? */
  .arrow-up,
  .arrow-down {
    min-width: $spacing;
  }
`;
/**
 * @todo pass props in for doing transform animation
 * @todo animate bg like menu
 * @note was = styled.withComponent(BaseStyledSelectWrap) `
 */
const StyledSelectWrap = view_container_1.styled.div.attrs({
    className: 'select-wrap',
    'data-qa': 'qa-dropdown-container',
}) `
  position: relative;
  padding: 0 0.5rem;

  @tablet-or-smaller() {
    padding: 0;
  }
`;
//# sourceMappingURL=_styled.js.map