@use "../../styles/utils";
@use "../FormField/FormFieldLabel/variables" as labelVars;
@use "./variables" as locals;

@mixin outline {
  outline: var(--cmm-outline-width) solid var(--cmm-outline-color-primary);
  outline-offset: 2px;
}

@include utils.layer {
  .Block {
    @extend %sizeDefaults;

    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.5em;
    position: relative;
    border-radius: var(--cmm-radius-sm);
    margin: locals.$margin;

    // :focus-visible but look at the children.
    @supports selector(:has(:focus-visible)) {
      &:has(:focus-visible) {
        @include outline;
      }
    }

    // Fallback to :focus-within until Firefox supports :has().
    @supports not selector(:has(:focus-visible)) {
      &:focus-within {
        @include outline;
      }
    }

    > input[type="checkbox"] {
      margin: 0;
      opacity: 0;
      position: absolute;
      height: 100%;
      width: 100%;
      cursor: pointer;

      &:checked {
        & + .marker {
          background: var(--cmm-color-primary-soft-bg);

          &::before {
            transform: scale(1);
          }
        }
      }

      &:hover:not(:disabled) {
        & + .marker {
          background: var(--cmm-color-primary-soft-bg-hover);
        }
      }

      &:disabled {
        cursor: not-allowed;

        ~ .marker {
          opacity: 0.6;
          cursor: not-allowed;
        }

        ~ label {
          opacity: 0.6;
          cursor: not-allowed;
        }
      }
    }

    :global(.FormFieldError) {
      position: relative;
      grid-column: 2;
    }
  }

  .marker {
    width: locals.$size;
    height: locals.$size;
    border-radius: var(--cmm-radius-sm);
    display: grid;
    place-content: center;
    background: var(--cmm-color-primary-soft-bg);
    transition: var(--cmm-transition-bg);

    &::before {
      content: "";
      width: calc(locals.$size * 0.5);
      height: calc(locals.$size * 0.5);
      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
      transform: scale(0);
      background: var(--cmm-color-primary-soft-font);
    }
  }

  %sizeDefaults {
    #{locals.$size_name}: 1.25rem;

    > label {
      #{labelVars.$fontSize_name}: var(--cmm-font-size-sm);
    }
  }

  .--sm {
    #{locals.$size_name}: 1rem;

    > label {
      #{labelVars.$fontSize_name}: var(--cmm-font-size-sm);
    }
  }

  .--md {
    @extend %sizeDefaults;
  }

  .--lg {
    #{locals.$size_name}: 1.5rem;

    > label {
      #{labelVars.$fontSize_name}: var(--cmm-font-size-md);
    }
  }
}
