@use "../theme.scss" as *;
@use "../icon.scss" as *;

.radio-group {
  display: block;
  overflow: auto; // prevents the margin-bottom to collapse
  margin-bottom: $form-control-vertical-gap;

  .radio-button {
    display: inline-block;

    & .radio-button-label {
      cursor: pointer;
      outline: none;
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      line-height: $form-control-label-line-height;
      margin-top: 0;
    }

    & .radio-button-label > .icon {
      color: $radio-button-color;
      display: inline-block;
      min-width: 1.5em;
      text-align: center;
      padding-right: 0.4em;
      padding-left: 0.4em;
      font-size: $radio-button-icon-size;
    }

    & .radio-button-label:hover {
      & > .icon {
        color: $radio-button-hover-color;
      }
    }

    & .radio-button-label:focus-visible {
      & > .icon {
        color: $radio-button-focus-color;
      }
    }

    &.disabled .radio-button-label {
      cursor: default;
      & .icon {
        color: $radio-button-disabled-color;
      }
    }
  }

  &.vertical {
    & .radio-button {
      display: block;
      margin-bottom: $form-control-vertical-gap;
    }
    & .radio-button:last-child {
      margin-bottom: 0;
    }
  }

  &:not(.vertical) {
    & .radio-button {
      display: inline-block;
      margin-bottom: 0;
      margin-left: 0.5em;
      margin-right: 0.5em;
      padding-right: 0.4em;
    }

    & .radio-button:first-child {
      margin-left: 0;
    }
  }
}

.form-control-group .radio-group {
  margin-bottom: 0;
}