@use "../../../00-base/00-config/00-variables" as *;
@use "../../../00-base/01-helpers" as *;

////////////////////////////////////////////////////////////////////////////////
// *
// * Forms: checkboxes
// *
////////////////////////////////////////////////////////////////////////////////


// * Grouping of items
// =============================================================================

// same styling as a form-item

.form__group--checkboxes,
.form__group--radios {
  padding-left: var(--gap-sm);
  width: 100%;
}


// * Single item (input + label)
// =============================================================================

input[type="radio"],
input[type="checkbox"] {
  appearance: none;
  position: relative;
  top: rem(5);
  display: inline-block;
  margin: 0 rem(5) 0 0;
  padding: 0;
  border: rem(1) solid hsl(var(--clr-form-border));
  border-radius: 0;
  vertical-align: top; // to make sure checked marks are aligned properly with text
  background: hsl(var(--clr-white));
  transition: border-color $duration $easing, background-color $duration $easing;

  &:hover,
  &:focus {
    cursor: pointer;
  }

  &:disabled {
    opacity: .5;
    border-color: hsl(var(--clr-form-border));
    background: hsl(var(--clr-form-disabled-bg));

    &:focus,
    &:hover {
      cursor: default;
      border-color: hsl(var(--clr-form-border));
    }

    &:focus + label,
    &:hover + label,
    & + label {
      opacity: .5;
    }
  }

  & + label {
    position: relative;
    display: inline; // inline in order for the text to wrap and the checkmark to properly align
    font-weight: var(--fw-normal);

    .form__label__not-required {
      display: none; // not needed here
    }
  }
}

// -- custom checkboxes
//    set our icon via the label next to it

/* Gin admin theme override */
.ui-dialog [class*="layout-builder"] :not(.form-checkboxes):not(td):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input {
  &,
  &:focus-visible,
  &:hover,
  &:active,
  &:active:focus {
    opacity: 1;
    @include square(rem(12));
    clip: auto;
    border:rem(1) solid hsl(var(--clr-form-border));
  }
}

input[type="checkbox"] {
  background-color: hsl(var(--clr-white));
  @include square(rem(12));
  transition: background-color $easing .1s, border-color $easing .1s;

  & + label {
    @include icon((
      icon: check,
      color: hsl(var(--clr-form-active)),
      size: 15,
      position: absolute,
      left: rem(-21),
      top: 0,
    ));

    &::before {
      transition: opacity $easing .1s;
      opacity: 0;
    }
  }

  &:checked + label {
    &::before {
      opacity: 1;
    }
  }

  &:disabled:checked + label {
    &::before {
      color: hsla(var(--clr-form-active), .5);
    }
  }
}

// * Always flow text next to the input
// =============================================================================

// double classes to override the cascade
.form__element.form-type--checkbox,
.form__element.form-type--radio {
  position: relative;
  padding-left: var(--gap-md);
  margin-bottom: 0;

  input {
    position: absolute;
    left: 0;
    top: rem(6);
  }
}
