// Color input styles
// ----------------------------------------------

/* SG
# Forms/Option input

```
<fieldset>
  <label class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">OPTION</label>
  <div class="u-iBlock">
    <div class="CDB-OptionInput">
      <span class="CDB-ColorBar" style="background-color: #207EBA;"></span>
    </div>
  </div>
</fieldset>
 ```
*/

@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
@import '../../cdb-utilities/mixins';

.CDB-OptionInput {
  @include display-flex();
  @include align-items(center);
  width: $baseSize * 20;
  height: $baseSize * 4;
  padding: $baseSize;
  border: 1px solid $cMainLine;
  border-radius: $baseSize / 2;
  box-sizing: border-box;
  cursor: pointer;

  &:hover {
    border: 1px solid $cHoverLine;
  }
  &:focus {
    border: 1px solid $cBlue;
  }
}
.CDB-OptionInput.is-active {
  border: 1px solid $cBlue;
}