@use "00-base/configure" as *;

.ma__input-checkbox {
  display: flex;
  align-items: flex-start;
  position: relative;
  gap: 0.5rem;

  input {
    position: absolute;
    opacity: 0;
    width: $fonts-larger;
    height: $fonts-larger;
    margin: 0;
    flex-shrink: 0;

    @media (forced-colors: active) {
      // Show native checkbox in high contrast mode
      position: static;
      opacity: 1;
      appearance: auto;
    }
  }

  label {
    font-size: $fonts-large;
    font-weight: $fonts-light;
    line-height: 1.33;  // $fonts-2xlarge/$fonts-large
    cursor: pointer;
    margin: 0;
    display: flex;
    align-items: flex-start;
    padding-left: calc(#{$fonts-2xlarge} + 0.5rem); // Space for checkbox
    position: relative;

    &:before {
      // Checkmark using :before pseudo-element with SVG
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      transform: translateY(-0.1em); // Small adjustment to align with text baseline
      width: $fonts-2xlarge;
      height: $fonts-2xlarge;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 2px solid var(--mf-c-bd-input);
      transition: opacity 0.2s ease;
      pointer-events: none;
      margin-right: 0.25em;

      @media (forced-colors: active) {
        // Hide in high contrast mode
        display: none;
      }
    }

    span {
      font-size: $fonts-large;
    }

    @media (forced-colors: active) {
      // Adjust spacing in high contrast mode
      padding-left: 0;
    }
  }

  & > svg {
    // Icon spacing
    height: 24px;
    width: 24px;
    color: var(--mf-c-primary-alt);
  }

  input:checked ~ label {
    // States - Show checkmark when checked

    &:before {
      content: '';
      background-image: url("#{$assets-path}/images/icons/bold/checkmark--bold.svg");
      background-color: var(--mf-c-bg);  // Add background color when checked
    }
  }

  input:focus ~ label {

    &:before {

      outline: 2px solid var(--mf-c-focus);
      outline-offset: 2px;
    }
  }

  input:focus {
    // Focus on native input in high contrast mode

    @media (forced-colors: active) {

      outline: 2px solid Highlight;
      outline-offset: 2px;
    }
  }

  input.has-error ~ label:before,
  input.has-error ~ label:after {

    border-color: var(--mf-c-bd-error);
  }


  input ~ label.has-error:before,
  input ~ label.has-error:after {
    // Error state

    border-color: var(--mf-c-bd-error);
  }

  &--disabled {
    // Disabled state

    label {

      opacity: 0.5;
      cursor: not-allowed;

      &:before,
      &:after {

        opacity: 0.5;
      }
    }

    svg {

      opacity: 0.5;
    }
  }

  .ma__form--light & {
    // Light theme

    label:after {

      background-color: rgba($c-bg, 0.1);
      border-color: rgba($c-bd-input, 0.5);
    }
  }
}