@value inputHeight, activeEdgeWidth from '../dimensions.css';
@value textLight from '../colors.css';

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

.common > input, .common > textarea {
  padding-right: calc(inputHeight - 1px);
  background-image: url(../../images/dropdown.svg);
  background-repeat: no-repeat;
  background-position: right;
}

.common > div > header {
  font-size: 12px;
  font-style: italic;
  white-space: nowrap;
  /* Italic lean makes padding on the right appear smaller */
  padding: 4px 6px 4px 4px;
}

.common > div > header+ul,
.common > div > header+footer,
.common > div > ul+footer {
  border-top: 1px solid textLight;
}