@randstad-design/orbit-multitheme/dist/assets/theme-spherion/components/forms/option-group.css

multitheme Front-end code based on Randstad Human Forward components

.option-group__wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: -10px; }

.option-group .form-group__input {
  margin: 10px 10px 0 0;
  top: 0; }

.option-group input:focus + .selection-control__label {
  background: #fff0e8;
  border-color: #ff661a; }
  .bg-brand--gradient-orange .option-group input:focus + .selection-control__label {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5); }

.option-group .selection-control__label {
  border: 1px solid #e2e2e2;
  color: #ff661a;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  height: 50px;
  line-height: 48px;
  margin-left: 0;
  min-width: 50px;
  padding: 0 10px;
  -webkit-transition: background 0.2s;
  transition: background 0.2s; }
  .bg-brand--gradient-orange .option-group .selection-control__label {
    border: 1px solid #f8f8f8;
    color: #fff; }
  .option-group .selection-control__label:hover {
    background: #fff0e8;
    border-color: #ff661a;
    -webkit-transition: background 0.2s;
    transition: background 0.2s; }
    .bg-brand--gradient-orange .option-group .selection-control__label:hover {
      background: rgba(255, 255, 255, 0.2);
      border-color: rgba(255, 255, 255, 0.5); }
  @media (min-width: 941px) {
    .option-group .selection-control__label {
      padding: 0 20px; } }

.option-group .selection-control input:checked + .selection-control__label {
  background: #ff661a;
  border-color: #ff661a;
  color: #fff; }
  .bg-brand--gradient-orange .option-group .selection-control input:checked + .selection-control__label {
    background: #2e2e2e;
    border-color: #2e2e2e;
    color: #fff; }

.option-group.form-group--error .selection-control__label {
  background: #fef5f4;
  border-color: #f13c23;
  color: #f13c23; }
  .bg-brand--gradient-orange .option-group.form-group--error .selection-control__label {
    border-color: #2e2e2e; }
  .bg-brand--gradient-orange .option-group.form-group--error .selection-control__label {
    border-color: #2e2e2e; }
  .option-group.form-group--error .selection-control__label:hover {
    background: #fff0e8;
    border-color: #ff661a;
    color: #f13c23; }
    .bg-brand--gradient-orange .option-group.form-group--error .selection-control__label:hover {
      border-color: #2e2e2e; }

.option-group.form-group--error .selection-control input:checked + .selection-control__label {
  background: #ff661a;
  border-color: #ff661a;
  color: #fff; }
  .bg-brand--gradient-orange .option-group.form-group--error .selection-control input:checked + .selection-control__label {
    background: #2e2e2e;
    border-color: #2e2e2e;
    color: #fff; }

.option-group.form-group--readonly .selection-control__label {
  background: #f8f8f8;
  color: #97999b;
  fill: #97999b; }

/*# sourceMappingURL=option-group.css.map */