@dnb/eufemia/cjs/extensions/forms/Field/Selection/style/dnb-selection.css

DNB Eufemia Design System UI Library

/*
 * Utilities
 */
.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label {
  align-self: center;
}
.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label, .dnb-forms-field-selection__options-layout--horizontal .dnb-forms-field-block--layout-horizontal .dnb-form-label {
  margin-bottom: 0;
}
.dnb-forms-field-selection--options-layout--vertical.dnb-forms-field-selection--layout-horizontal .dnb-forms-field-block__label {
  align-items: flex-start;
}
.dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label {
  line-height: 2.5rem;
}
.dnb-forms-field-selection__variant--radio-list {
  --outline-color: var(--color-black-8);
  --outline-width: 0.0625rem;
  --list-padding: 1rem;
  --list-height: 4rem;
}
.dnb-forms-field-selection__variant--radio-list .dnb-radio-group__shell {
  row-gap: 0;
}
.dnb-forms-field-selection__variant--radio-list .dnb-radio-group__fieldset {
  border-radius: 0.5rem;
  --border-color: var(--outline-color);
  --border-width: var(--outline-width);
  box-shadow: 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
  background-color: var(--color-white);
}
.dnb-forms-field-selection__variant--radio-list .dnb-radio {
  justify-content: center;
  padding: calc((var(--list-height) - 1.5rem) / 2) var(--list-padding);
  overflow: clip;
}
.dnb-forms-field-selection__variant--radio-list .dnb-radio .dnb-radio__input {
  -webkit-appearance: none;
          appearance: none;
  transform: none;
  left: calc(var(--list-padding) * -1);
  width: 100vw;
  height: var(--list-height);
}
.dnb-forms-field-selection__variant--radio-list .dnb-radio .dnb-form-label {
  padding-left: var(--list-padding);
}
.dnb-forms-field-selection__variant--radio-list .dnb-radio {
  position: relative;
}
.dnb-forms-field-selection__variant--radio-list .dnb-radio:not(:first-of-type)::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--outline-color);
  height: var(--outline-width);
}
.dnb-forms-field-selection .dnb-forms-field-block__contents {
  display: flex;
}
.dnb-forms-field-selection .dnb-radio-group .dnb-height-animation, .dnb-forms-field-selection .dnb-radio-group > .dnb-flex-container,
.dnb-forms-field-selection .dnb-toggle-button-group .dnb-height-animation,
.dnb-forms-field-selection .dnb-toggle-button-group > .dnb-flex-container {
  width: 100%;
  flex-grow: 1;
}