'use strict';

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

var styled = require('styled-components');
var utils = require('../utils.js');
var index = require('../../../utils/index.js');
var styles = require('../../../utils/styles.js');
var styles$1 = require('../textField/styles.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

const SelectInput = styled__default['default'].div.withConfig({
    shouldForwardProp: index.convertToTransientProps(['hasText']),
}) `
  display: flex;
  flex-direction: row;
  justify-content: ${(props) => (props.hasText ? 'space-between' : 'flex-end')};
  width: 100%;
  color: ${(props) => index.getColorAlias(props.disabled ? 'contentDisabled' : 'contentDefault')};
  background: ${(props) => props.disabled ? index.getColorAlias('disabled01') : 'transparent'};
  ${index.getFontSize('size16')};
  ${(props) => utils.getFieldPadding(props.variant)};
  border: unset;
  outline: unset;
  border-radius: ${(props) => props.theme.radius.roundedC};
  width: 100%;
  ${index.getDefaultTransition('background')};
  align-items: center;

  &:hover {
    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
  }

  &:focus:hover {
    background: ${(props) => props.disabled
    ? index.getColorAlias('disabled01')
    : index.getColorAlias('containerDefault')};
  }

  input {
    left: 0;
    width: 100%;
    bottom: 0;
    opacity: 0;
    position: absolute;
    pointer-events: none;
  }

  span {
    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
    flex-wrap: wrap;
    gap: ${index.getSpacing('s01')};
  }

  > svg {
    fill: ${(props) => props.disabled
    ? index.getColorAlias('disabled01')
    : index.getColorAlias('contentDefault')};
  }
`;
const OptionsPopper = styled__default['default'].div.withConfig({
    shouldForwardProp: index.convertToTransientProps(['maxHeight']),
}) `
  max-height: ${(props) => `${props.maxHeight}px`};
  z-index: 999;
  overflow-y: auto;
  overflow-x: hidden;
  background: ${index.getColorAlias('containerDefault')};
  font-family: ${(props) => props.theme.font.familyPrimary};
  border-radius: ${(props) => props.theme.radius.roundedC};
  padding: ${index.getSpacing('s02', 's00')};
  width: ${(props) => `${props.width}px`};
  box-shadow: ${(props) => props.theme.elevation.e3};
  ${(props) => styled.css `
      animation: ${styles.fadeIn} ${props.theme.motion.speed.defaultM}
        ${props.theme.motion.easing.easeDefault};
    `};

  &:active,
  &:focus,
  &:enabled {
    outline: none;
  }
`;
const OptionItemLabel = styled__default['default'].div `
  ${(props) => props.isMultivalue &&
    styled.css `
      margin-left: ${index.getSpacing('s04')};
    `};
`;
const OptionItem = styled__default['default'].span.withConfig({
    shouldForwardProp: index.convertToTransientProps([
        'isSelected',
        'isMultivalue',
    ]),
}) `
  display: flex;
  ${(props) => props.isMultivalue
    ? styled.css `
          align-items: center;
          justify-content: flex-start;
        `
    : styled.css `
          align-items: center;
          justify-content: space-between;
        `};

  padding: ${index.getSpacing('s03', 's04')};
  color: ${(props) => props.isDisabled
    ? index.getColorAlias('contentDisabled')
    : index.getColorAlias('contentDefault')};
  font-weight: ${(props) => props.isSelected
    ? props.theme.font.weightExtrabold
    : props.theme.font.weightRegular};
  font-family: ${(props) => props.theme.font.familyPrimary};
  outline: none;
  border: 2px solid transparent;
  border-radius: ${(props) => props.theme.radius.roundedA};
  cursor: pointer;
  ${index.getFontSize('size16')};
  ${index.getDefaultTransition()};

  background: ${(props) => index.getColorAlias(props.isHovered ? 'disabled01' : 'containerDefault')};

  &:hover {
    background: ${index.getDarkenColor('hover02', 'containerDefault')};
  }

  &:focus-visible {
    border-color: ${index.getColorAlias('focusOuter')};
  }
`;
const DropdownPrefix = styled__default['default'](styles$1.Prefix) `
  ${(props) => props.hasValue
    ? styled.css `
          padding-left: ${index.getSpacing('s04')};
        `
    : styled.css `
          padding: ${index.getSpacing('s00', 's04')};
        `};
`;

exports.DropdownPrefix = DropdownPrefix;
exports.OptionItem = OptionItem;
exports.OptionItemLabel = OptionItemLabel;
exports.OptionsPopper = OptionsPopper;
exports.SelectInput = SelectInput;
