"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const view_container_1 = require("view-container");
// @todo split animations
// @todo remove classname
exports.OptionListWrapper = view_container_1.styled.div.attrs({
    className: 'select-dropdown-list',
    'data-qa': 'qa-dropdown-lists',
}) `
  width: 100%;
  max-height: 0px;
  // position: absolute;
  // border: 0.0625rem solid $colors-lightgrey;
  // border-top: none;
  // border-radius: 0.1875rem;
  z-index: 61;
  transition: 0.1s max-height cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: top center;
  background-color: $colors-white;
  backface-visibility: hidden;
  overflow: hidden;
  span:nth-child(2) {
    margin-left: $spacing-small;
  }

  /* @todo should be using AnimateHeight */
  ${(props) => props.isVisible === true &&
    view_container_1.styled.css `
      transition-duration: 0.24s;
      max-height: ${props.length * 50}px;
    `};
`;
//# sourceMappingURL=_styled.js.map