@value buttonText, buttonBg, buttonBgActive, buttonBgDisabled from '../colors.css';
@value roundedCornerRadius, activeEdgeWidth from '../dimensions.css';

.common {
  composes: common from './Input.css';
  margin: 0;
  outline: none;
  border: 0;
  border-radius: roundedCornerRadius;
  padding: 6px 10px;
  color: buttonText;
  background-color: buttonBg;
}

.common:disabled {
  background-color: buttonBgDisabled;
}

.common:hover:not(:disabled) {
  background-color: buttonBgActive;
}

.common:focus {
  box-shadow: 0 0 0 activeEdgeWidth buttonBgActive;
}

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

.icon {
  composes: common;
  padding-left: 32px;
  background-position: 10px center;
  background-size: 18px;
  background-repeat: no-repeat;
}