@import '../../../../../style/core/utilities.scss';

.dnb-forms-field-selection {
  &__variant--dropdown {
    .dnb-forms-field-block {
      &--layout-horizontal .dnb-form-label {
        align-self: center;
      }
    }
  }
  &__variant--dropdown,
  &__options-layout--horizontal {
    .dnb-forms-field-block {
      &--layout-horizontal .dnb-form-label {
        margin-bottom: 0;
      }
    }
  }
  &--options-layout--vertical#{&}--layout-horizontal {
    .dnb-forms-field-block__label {
      align-items: flex-start;
    }
  }
  &__variant--button {
    .dnb-forms-field-block {
      &--layout-horizontal .dnb-form-label {
        line-height: 2.5rem;
      }
    }
  }
  &__variant--radio-list {
    --outline-color: var(--color-black-8);
    --outline-width: 0.0625rem;
    --list-padding: 1rem;
    --list-height: 4rem;

    .dnb-radio-group__shell {
      row-gap: 0;
    }
    .dnb-toggle-button-group__fieldset {
      border-radius: 0.5rem;
      @include fakeBorder(var(--outline-color), var(--outline-width));
      background-color: var(--color-white);
    }

    .dnb-radio {
      justify-content: center;

      padding: calc((var(--list-height) - 1.5rem) / 2) var(--list-padding);

      // Clip await the width of 100vw in the .dnb-radio__input
      overflow: clip;

      // Make the whole area clickable
      .dnb-radio__input {
        appearance: none;
        transform: none;

        left: calc(var(--list-padding) * -1);
        width: 100vw;
        height: var(--list-height);
      }

      .dnb-form-label {
        padding-left: var(--list-padding);
      }

      // Separator
      position: relative;
      &:not(:first-of-type)::before {
        content: '';
        position: absolute;
        inset: 0;

        background-color: var(--outline-color);
        height: var(--outline-width);
      }
    }
  }

  // In order to stretch nested Section components
  // Because __contents is not a flex container by default (and should not be)
  .dnb-forms-field-block__contents {
    display: flex;
  }

  .dnb-radio-group,
  .dnb-toggle-button-group {
    // On order to stretch a nested Section component
    .dnb-height-animation,
    & > .dnb-flex-container {
      width: 100%;
      flex-grow: 1;
    }
  }
}