@value inputBg, buttonText, buttonBg, buttonBgActive, miniButtonBgDisabled, textMedium, textDark from '../colors.css';
@value activeEdgeWidth, inputHeight from '../dimensions.css';

.common {
  composes: common from './Input.css';
  margin: 0;
  border-radius: 0;
  border: none;
  padding: 0;
  height: calc(inputHeight - 2px);
  display: block;
  font-size: 12px;
  line-height: calc(inputHeight - 2px);
  background-color: transparent;
  color: textDark;
  overflow: hidden;
  text-align: center;
}

div.common {
  color: textMedium;
}

.common:disabled {
  color: textDark;
  background-color: miniButtonBgDisabled;
}

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

.common:enabled:focus {
  outline: solid buttonBgActive;
  outline-width: activeEdgeWidth;
  position: relative;
  z-index: 2;
  color: buttonText;
  background-color: buttonBg;
}

.common:enabled:hover {
  outline: 1px solid buttonBgActive;
  position: relative;
  z-index: 1;
  color: buttonText;
  background-color: buttonBg;
}

.common:enabled:hover:focus {
  outline: activeEdgeWidth solid buttonBgActive;
  position: relative;
  z-index: 2;
  color: buttonText;
  background-color: buttonBgActive;
}

.common::-moz-focus-inner {
  border: 0;
}

.normal {
  composes: common;
  width: calc(inputHeight - 2px);
}

.autoWidth {
  composes: common;
  padding: 0 4px;
}