@randstad-design/orbit-multitheme/dist/assets/theme-randstad/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: #ecf3fc;
  border-color: #2175d9; }
  .bg-variant-brand-primary .option-group input:focus + .selection-control__label {
    background: var(--color-brand-tertiary);
    border-color: var(--color-brand-tertiary);
    color: var(--color-brand-secondary); }
  .bg-variant-brand-secondary .option-group input:focus + .selection-control__label {
    background: var(--color-brand-tertiary);
    border-color: var(--color-brand-tertiary);
    color: var(--color-brand-secondary); }
  .bg-variant-brand-tertiary .option-group input:focus + .selection-control__label {
    background: var(--color-brand-secondary);
    border-color: var(--color-brand-secondary);
    color: var(--color-white); }
  .bg-variant-white .option-group input:focus + .selection-control__label {
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
    color: var(--color-white); }
  .bg-variant-brand-quaternary .option-group input:focus + .selection-control__label {
    background: var(--color-brand-secondary);
    border-color: var(--color-brand-secondary);
    color: var(--color-white); }
  .bg-variant-brand-quinary .option-group input:focus + .selection-control__label {
    background: var(--color-brand-secondary);
    border-color: var(--color-brand-secondary);
    color: var(--color-white); }
  .bg-variant-brand-senary .option-group input:focus + .selection-control__label {
    background: var(--color-brand-secondary);
    border-color: var(--color-brand-secondary);
    color: var(--color-white); }

.option-group .selection-control__label {
  border: 1px solid #d7d7d7;
  color: #2175d9;
  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-variant-brand-primary .option-group .selection-control__label {
    border-color: var(--color-brand-tertiary);
    color: var(--color-white); }
  .bg-variant-brand-secondary .option-group .selection-control__label {
    border-color: var(--color-brand-tertiary);
    color: var(--color-white); }
  .bg-variant-brand-tertiary .option-group .selection-control__label {
    border-color: var(--color-brand-secondary);
    color: var(--color-brand-secondary); }
  .bg-variant-white .option-group .selection-control__label {
    border-color: var(--color-brand-primary);
    color: var(--color-brand-primary); }
  .bg-variant-brand-quaternary .option-group .selection-control__label {
    border-color: var(--color-brand-secondary);
    color: var(--color-brand-secondary); }
  .bg-variant-brand-quinary .option-group .selection-control__label {
    border-color: var(--color-brand-secondary);
    color: var(--color-brand-secondary-shade-180); }
  .bg-variant-brand-senary .option-group .selection-control__label {
    border-color: var(--color-brand-secondary);
    color: var(--color-brand-secondary); }
  .option-group .selection-control__label:hover {
    background: #ecf3fc;
    border-color: #2175d9;
    -webkit-transition: background 0.2s;
    transition: background 0.2s; }
    .bg-variant-brand-primary .option-group .selection-control__label:hover {
      background: var(--color-brand-tertiary);
      border-color: var(--color-brand-tertiary);
      color: var(--color-brand-secondary); }
    .bg-variant-brand-secondary .option-group .selection-control__label:hover {
      background: var(--color-brand-tertiary);
      border-color: var(--color-brand-tertiary);
      color: var(--color-brand-secondary); }
    .bg-variant-brand-tertiary .option-group .selection-control__label:hover {
      background: var(--color-brand-secondary);
      border-color: var(--color-brand-secondary);
      color: var(--color-white); }
    .bg-variant-white .option-group .selection-control__label:hover {
      background: var(--color-brand-primary);
      border-color: var(--color-brand-primary);
      color: var(--color-white); }
    .bg-variant-brand-quaternary .option-group .selection-control__label:hover {
      background: var(--color-brand-secondary);
      border-color: var(--color-brand-secondary);
      color: var(--color-white); }
    .bg-variant-brand-quinary .option-group .selection-control__label:hover {
      background: var(--color-brand-secondary);
      border-color: var(--color-brand-secondary);
      color: var(--color-white); }
    .bg-variant-brand-senary .option-group .selection-control__label:hover {
      background: var(--color-brand-secondary);
      border-color: var(--color-brand-secondary);
      color: var(--color-white); }
  @media (min-width: 941px) {
    .option-group .selection-control__label {
      padding: 0 20px; } }

.option-group .selection-control input:checked + .selection-control__label {
  background: #2175d9;
  border-color: #2175d9;
  color: #fff; }
  .bg-variant-brand-primary .option-group .selection-control input:checked + .selection-control__label {
    background: var(--color-brand-tertiary-shade-110);
    border-color: var(--color-brand-tertiary-shade-110);
    color: var(--color-brand-secondary); }
  .bg-variant-brand-secondary .option-group .selection-control input:checked + .selection-control__label {
    background: var(--color-brand-tertiary-shade-110);
    border-color: var(--color-brand-tertiary-shade-110);
    color: var(--color-brand-secondary); }
  .bg-variant-brand-tertiary .option-group .selection-control input:checked + .selection-control__label {
    background: var(--color-brand-secondary-shade-180);
    border-color: var(--color-brand-secondary-shade-180);
    color: var(--color-white); }
  .bg-variant-white .option-group .selection-control input:checked + .selection-control__label {
    background: var(--color-brand-primary-shade-130);
    border-color: var(--color-brand-primary-shade-130);
    color: var(--color-white); }
  .bg-variant-brand-quaternary .option-group .selection-control input:checked + .selection-control__label {
    background: var(--color-brand-secondary-shade-180);
    border-color: var(--color-brand-secondary-shade-180);
    color: var(--color-white); }
  .bg-variant-brand-quinary .option-group .selection-control input:checked + .selection-control__label {
    background: var(--color-brand-secondary-shade-180);
    border-color: var(--color-brand-secondary-shade-180);
    color: var(--color-white); }
  .bg-variant-brand-senary .option-group .selection-control input:checked + .selection-control__label {
    background: var(--color-brand-secondary-shade-180);
    border-color: var(--color-brand-secondary-shade-180);
    color: var(--color-white); }

.option-group.form-group--error .selection-control__label {
  background: var(--color-ui-negative-5);
  border-color: var(--color-ui-negative);
  color: #e00f0f; }
  .bg-variant-brand-primary .option-group.form-group--error .selection-control__label {
    background: var(--color-white);
    border-color: var(--color-brand-secondary);
    color: var(--color-brand-secondary); }
  .bg-variant-brand-secondary .option-group.form-group--error .selection-control__label {
    background: var(--color-ui-warning-10);
    border-color: var(--color-ui-warning);
    color: var(--color-brand-secondary); }
  .bg-variant-brand-tertiary .option-group.form-group--error .selection-control__label {
    background: var(--color-ui-negative-5);
    border-color: var(--color-ui-negative);
    color: var(--color-brand-secondary); }
  .bg-variant-white .option-group.form-group--error .selection-control__label {
    background: var(--color-ui-negative-5);
    border-color: var(--color-ui-negative);
    color: var(--color-brand-secondary); }
  .bg-variant-brand-quaternary .option-group.form-group--error .selection-control__label {
    background: var(--color-white);
    border-color: var(--color-brand-secondary);
    color: var(--color-brand-secondary); }
  .bg-variant-brand-quinary .option-group.form-group--error .selection-control__label {
    background: var(--color-white);
    border-color: var(--color-brand-secondary-shade-180);
    color: var(--color-brand-secondary); }
  .bg-variant-brand-senary .option-group.form-group--error .selection-control__label {
    background: var(--color-white);
    border-color: var(--color-brand-secondary);
    color: var(--color-brand-secondary); }
  .bg-brand--dark-blue .option-group.form-group--error .selection-control__label,
  .bg-brand--blue .option-group.form-group--error .selection-control__label,
  .bg-brand--turquoise .option-group.form-group--error .selection-control__label,
  .bg-brand--yellow .option-group.form-group--error .selection-control__label {
    color: #0f1941; }
  .bg-brand--red .option-group.form-group--error .selection-control__label {
    color: #03050d; }
  .bg-variant-brand-primary .option-group.form-group--error .selection-control__label {
    color: var(--color-brand-secondary); }
  .bg-variant-brand-secondary .option-group.form-group--error .selection-control__label {
    color: var(--color-ui-warning); }
  .bg-variant-brand-tertiary .option-group.form-group--error .selection-control__label {
    color: var(--color-ui-negative); }
  .bg-variant-white .option-group.form-group--error .selection-control__label {
    color: var(--color-ui-negative); }
  .bg-variant-brand-quaternary .option-group.form-group--error .selection-control__label {
    color: var(--color-brand-secondary); }
  .bg-variant-brand-quinary .option-group.form-group--error .selection-control__label {
    color: var(--color-brand-secondary-shade-180); }
  .bg-variant-brand-senary .option-group.form-group--error .selection-control__label {
    color: var(--color-brand-secondary); }
  .option-group.form-group--error .selection-control__label:hover {
    background: #ecf3fc;
    border-color: #2175d9;
    color: #e00f0f; }
    .bg-brand--dark-blue .option-group.form-group--error .selection-control__label:hover,
    .bg-brand--blue .option-group.form-group--error .selection-control__label:hover,
    .bg-brand--turquoise .option-group.form-group--error .selection-control__label:hover,
    .bg-brand--yellow .option-group.form-group--error .selection-control__label:hover {
      color: #0f1941; }
    .bg-brand--red .option-group.form-group--error .selection-control__label:hover {
      color: #03050d; }
    .bg-variant-brand-primary .option-group.form-group--error .selection-control__label:hover {
      color: var(--color-brand-secondary); }
    .bg-variant-brand-secondary .option-group.form-group--error .selection-control__label:hover {
      color: var(--color-ui-warning); }
    .bg-variant-brand-tertiary .option-group.form-group--error .selection-control__label:hover {
      color: var(--color-ui-negative); }
    .bg-variant-white .option-group.form-group--error .selection-control__label:hover {
      color: var(--color-ui-negative); }
    .bg-variant-brand-quaternary .option-group.form-group--error .selection-control__label:hover {
      color: var(--color-brand-secondary); }
    .bg-variant-brand-quinary .option-group.form-group--error .selection-control__label:hover {
      color: var(--color-brand-secondary-shade-180); }
    .bg-variant-brand-senary .option-group.form-group--error .selection-control__label:hover {
      color: var(--color-brand-secondary); }

.option-group.form-group--error .selection-control input:checked + .selection-control__label {
  background: #2175d9;
  border-color: #2175d9;
  color: #fff; }
  .bg-variant-brand-primary .option-group.form-group--error .selection-control input:checked + .selection-control__label {
    background: var(--color-brand-tertiary-shade-110);
    border-color: var(--color-brand-tertiary-shade-110);
    color: var(--color-brand-secondary); }
  .bg-variant-brand-secondary .option-group.form-group--error .selection-control input:checked + .selection-control__label {
    background: var(--color-brand-tertiary-shade-110);
    border-color: var(--color-brand-tertiary-shade-110);
    color: var(--color-brand-secondary); }
  .bg-variant-brand-tertiary .option-group.form-group--error .selection-control input:checked + .selection-control__label {
    background: var(--color-brand-secondary-shade-180);
    border-color: var(--color-brand-secondary-shade-180);
    color: var(--color-white); }
  .bg-variant-white .option-group.form-group--error .selection-control input:checked + .selection-control__label {
    background: var(--color-brand-primary-shade-130);
    border-color: var(--color-brand-primary-shade-130);
    color: var(--color-white); }
  .bg-variant-brand-quaternary .option-group.form-group--error .selection-control input:checked + .selection-control__label {
    background: var(--color-brand-secondary-shade-180);
    border-color: var(--color-brand-secondary-shade-180);
    color: var(--color-white); }
  .bg-variant-brand-quinary .option-group.form-group--error .selection-control input:checked + .selection-control__label {
    background: var(--color-brand-secondary-shade-180);
    border-color: var(--color-brand-secondary-shade-180);
    color: var(--color-white); }
  .bg-variant-brand-senary .option-group.form-group--error .selection-control input:checked + .selection-control__label {
    background: var(--color-brand-secondary-shade-180);
    border-color: var(--color-brand-secondary-shade-180);
    color: var(--color-white); }

.option-group.form-group--readonly .selection-control__label {
  background: #f7f7f7;
  color: var(--color-brand-secondary-tint-60);
  fill: var(--color-brand-secondary-tint-60); }

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