@use "sass:color";
@use "./../../variables" as *;
@use "./../../mixins/breakpoints" as *;

.form__control.checkbox {
  & > * {
    &:not(:last-child) {
      margin-right: var(--spacer);

      @include media-breakpoint-up("desktop") {
        margin-right: calc(var(--spacer) * 0.5);
      }
    }
  }

  & input[type="checkbox"] {
    --input-width: auto;
    --input-desktop-width: auto;

    aspect-ratio: 1;
    flex-shrink: 0;
    vertical-align: text-bottom;

    &::before {
      content: "";
      position: absolute;
      margin: auto;
      inset: 0;
      overflow: hidden;
    }

    &:checked {
      background: var(--input-detail-background);

      &::before {
        border-right: 2px solid var(--white);
        border-bottom: 2px solid var(--white);
        height: 65%;
        width: 32.5%;
        transform: rotate(45deg) translateY(-15%) translateX(-15%);
      }

      &:disabled,
      &.disabled,
      &[aria-disabled="true"] {
        background: var(--input-disabled-detail-background);
      }
    }

    &:indeterminate,
    &[aria-checked="mixed"] {
      &::before {
        border: 2px solid var(--white);
        height: 0;
        width: 65%;
      }
    }

    &.input--small {
      --input-width: auto;
      --input-desktop-width: auto;
    }

    &.input--large {
      --input-width: auto;
      --input-desktop-width: auto;
    }

    @each $key, $value in $all-colors {
      &.input--#{$key} {
        &:checked {
          --input-detail-background: var(--#{$key});
          --input-disabled-detail-background: hsl(from var(--#{$key}) h s l / #{$color-disabled-alpha});
        }
      }
    }
  }
}