import { styled } from 'view-container'

interface OptionsListWrapProps {
  length?: number
  isVisible?: boolean
}

// @todo split animations
// @todo remove classname
export const OptionListWrapper = 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: OptionsListWrapProps) =>
    props.isVisible === true &&
    styled.css `
      transition-duration: 0.24s;
      max-height: ${props.length * 50}px;
    `};
`