@value textLight from '../colors.css';

.common {
  composes: common from './Input.css';
  display: flex;
}

.common > div {
  flex: 1 1 auto;
  display: flex;
  border: solid textLight;
  border-width: 1px 0 1px 1px;
  border-radius: 3px 0 0 3px;
}

.common > div input {
  height: 26px;
  border-radius: 3px;
  padding-left: 5px;
}

.normal {
  composes: common;
}

.common > div > :global(.cspace-input-DropdownMenuInput--common) {
  border-right: 1px solid textLight;
  flex: 0 1 auto;
}

.common > div > :global(.cspace-input-DropdownMenuInput--common) > input {
  background-size: 20px;
}

.common > div > :global(.cspace-input-DropdownMenuInput--common) > div {
  top: 28px;
}

.common > :global(.cspace-input-Button--common) {
  border-radius: 0 3px 3px 0;
  width: 28px;
  height: 28px;
  background-image: url(../../images/search.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 16px;
}

.common :global(.cspace-input-Menu--common) {
  max-height: 240px;
}