@value inputBg, textDark, textLight, readOnlyBg, readOnlyBorder from '../colors.css';
@value activeEdgeWidth, inputMargin from '../dimensions.css';

.common {
  composes: common from './Input.css';
  -webkit-appearance: none;
  display: inline-block;
  width: 100%;
  margin: 0;
  outline: none;
  border-radius: 0;
  padding: 2px;
  background-color: readOnlyBg;
  color: textDark;
  line-height: 18px;
}

.common:enabled {
  background-color: inputBg;
}

.common:focus {
  outline: solid textDark;
  outline-width: activeEdgeWidth;
  position: relative;
  z-index: 2;
}

.normal {
  composes: common;
  border: 1px solid readOnlyBorder;
  outline-offset: -1px;
  margin-bottom: inputMargin;
}

.normal:enabled {
  border-color: textLight;
}

.embedded {
  composes: common;
  border: none;
  outline-offset: 0;
}