@use '@cfpb/cfpb-design-system/src/utilities/mixins-utilities' as *;
@use '@cfpb/cfpb-design-system/src/utilities/index' as *;

.m-form-field {
  // Theme variables.
  --choice-border: var(--choice-border-default);
  --choice-border-hover: var(--choice-border-hover-default);
  --choice-border-focus: var(--choice-border-focus-default);
  --choice-outline-focus: var(--choice-outline-focus-default);
  --choice-bg: var(--choice-bg-default);
  --choice-bg-selected: var(--choice-bg-selected-default);
  --choice-bg-selected-focus: var(--choice-bg-selected-focus-default);
  --choice-label-disabled: var(--choice-label-disabled-default);

  // Private variables.
  --choice-border-width-addendum: 0;

  width: max-content;

  .a-label + .a-text-input {
    margin-top: rem-from-px(5px);
  }

  &--checkbox,
  &--radio {
    .a-label {
      display: inline-grid;

      // 30px is width of checkbox/radio button plus the needed padding.
      grid-template-columns: rem-from-px(30px) auto;
      vertical-align: top;
      cursor: pointer;

      // Wrap long words in narrow form fields to prevent clipping
      overflow-wrap: anywhere;
    }

    .a-checkbox,
    .a-radio {
      @include u-visually-hidden;

      &:focus + .a-label,
      &.focus + .a-label {
        outline: 1px dotted var(--choice-outline-focus);
        outline-offset: 1px;
      }

      &:disabled {
        & + .a-label {
          cursor: not-allowed;
          color: var(--choice-label-disabled);
        }
      }
    }

    &:has(.a-checkbox:disabled),
    &:has(.a-radio:disabled) {
      --choice-border: var(--choice-border-disabled);
      --choice-bg: var(--choice-bg-disabled);
      --choice-bg-selected: var(--choice-bg-selected-disabled);
    }

    &-success,
    &-warning,
    &-error {
      --choice-border-width-addendum: 1px;
    }

    &-success {
      --choice-border: var(--choice-border-success);
    }

    &-warning {
      --choice-border: var(--choice-border-warning);
    }

    &-error {
      --choice-border: var(--choice-border-error);
    }
  }

  &--radio {
    input:disabled {
      &:checked + .a-label::before,
      &:focus + .a-label::before,
      &.focus + .a-label::before,
      &:hover + .a-label::before,
      &.hover + .a-label::before {
        border-color: var(--choice-border);
        outline: none;
        box-shadow: none; // Applies only to radio buttons.
      }

      & + .a-label {
        &::before {
          outline: none;
        }
      }
    }

    &:hover::before,
    &.hover::before {
      border-color: var(--choice-border-hover);
    }

    .a-label {
      &::before {
        display: inline-block;
        grid-row-start: 1;
        grid-row-end: 3;
        border: 1px solid var(--choice-border);
        outline: var(--choice-border-width-addendum) solid var(--choice-border);
        height: rem-from-px(18px);
        width: rem-from-px(18px);
        margin-right: 10px;
        background-color: var(--choice-bg);
        content: '';
        vertical-align: top;

        // Offset so that the checkbox/radio fits within focused area.
        position: relative;
        top: 1px;
        left: 1px;
        border-radius: 50%;

        /* The rotate is needed to fix a bug in Firefox where radio
          button was not centered. */
        transform: rotate(0deg);
      }
    }

    .a-radio {
      &:focus + .a-label::before,
      &.focus + .a-label::before {
        outline: none;
        border-color: var(--choice-border-focus);
        box-shadow: 0 0 0 1px var(--choice-border-focus);
      }

      &:hover + .a-label::before,
      &.hover + .a-label::before {
        outline: none;
        border-color: var(--choice-border-hover);
        box-shadow: 0 0 0 1px var(--choice-border-hover);
      }

      &:checked + .a-label::before {
        background-color: var(--choice-bg-selected);
        box-shadow: inset 0 0 0 2px var(--white); // The radio button ring.
      }

      &:focus:checked + .a-label::before,
      &.focus:checked + .a-label::before {
        background-color: var(--choice-bg-selected-focus);
        border-color: var(--choice-border-focus);
        box-shadow:
          0 0 0 1px var(--choice-border-focus),
          inset 0 0 0 2px var(--white); // The radio button ring.
      }

      &:hover:checked + .a-label::before,
      &.hover:checked + .a-label::before {
        border-color: var(--choice-border-hover);
        box-shadow:
          0 0 0 1px var(--choice-border-hover),
          inset 0 0 0 2px var(--white); // The radio button ring.
      }

      &:checked:disabled + .a-label::before,
      &:hover:checked:disabled + .a-label::before,
      &.hover:checked:disabled + .a-label::before {
        background-color: var(--choice-bg-selected);
        box-shadow: inset 0 0 0 2px var(--gray-10); // The radio button ring.
        border-color: var(--choice-border-disabled);
      }
    }
  }

  &--lg-target {
    width: 100%;
    display: block;

    .a-label {
      box-sizing: border-box;
      width: 100%;
      padding: 15px;
      background-color: var(--form-field-input-lg-target-bg);
    }

    .a-checkbox,
    .a-radio {
      &:checked + .a-label {
        background-color: var(--form-field-input-lg-target-bg-selected);
        box-shadow: inset 0 0 0 1px var(--form-field-input-lg-target-border);
      }

      &:hover + .a-label,
      &.hover + .a-label,
      &:focus + .a-label,
      &.focus + .a-label {
        box-shadow: inset 0 0 0 2px var(--form-field-input-lg-target-border);
      }

      &:focus + .a-label,
      &.focus + .a-label,
      &:checked + .a-label {
        outline-offset: 1px;
      }

      &:disabled + .a-label,
      &:checked:disabled + .a-label,
      &:hover:disabled + .a-label {
        color: var(--choice-label-disabled);
        box-shadow: none;
        background-color: var(--form-field-input-lg-target-bg-disabled);
      }

      &:checked:disabled + .a-label {
        border: 1px solid var(--form-field-border-disabled);
      }
    }
  }
}