@import '../../styles/colors-v2.css';
@import '../../styles/spacing.css';
@import '../../styles/typography-v2.css';

.dropdown {
  composes: container from '../listbox/listbox.css';
  box-sizing: border-box;
  background-color: var(--white);
  max-height: calc(var(--spacing-x-large) * 10);
  overflow-y: scroll;
  position: absolute;
  width: 100%;
  z-index: 10;
}

.inputStyles {
  border: 1px solid var(--mds-grey-12);
  border-radius: var(--spacing-x-small);
  box-sizing: border-box;
  color: var(--mds-grey-87);
  font: var(--mds-type-content);
  height: 100%;
  min-height: var(--spacing-x-large);
  padding-right: 60px; /* stylelint-disable-line css-modules/css-variables */
  padding-left: var(--spacing-medium);
  width: 100%;
}

.input {
  composes: inputStyles;
}

.input:disabled {
  background-color: var(--mds-grey-3);
}

.input:read-only {
  background-color: var(--mds-grey-3);
}

.input-invalid {
  composes: inputStyles;
  border-color: var(--mds-red-100);
}