@import "flive-vars";

.input-control {
  @include input();
  display: block;
  padding: 0.5em;
  font-size: 1rem;
  width: 100%;
}

.input-group {
  display: table;
  width: 100%;
  margin-top: 6px;
}

.input-group-addon {
  background-color: lighten($form-control-background-color, 4);
  border: 2px solid $form-control-background-color;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  font-size: 1.5em;
  min-width: 20px;
}
.input-group-addon-control {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  margin-top: 0 !important;
}

.read-only {
  composes: input-control;
  background-color: lighten($form-control-background-color, 4);
  cursor: not-allowed;
}