@use 'sass:math';
@use '../settings/variables' as v;
@use '../settings/mixins' as m;
@use '../settings/functions' as f;

$-forced-color-active: active;

/* stylelint-disable selector-max-specificity, max-nesting-depth, selector-max-compound-selectors, value-list-comma-newline-after */
.qpp-c-checkbox,
.qppds .qpp-c-checkbox,
.qpp-prose .qpp-c-checkbox {
  background: v.$white;

  .qpp-c-checkbox__label {
    font-size: v.$font-size-16;
    line-height: v.$line-height-lg;
    &::before,
    &::after {
      width: v.$spacing-20;
      height: v.$spacing-20;
    }
  }

  &--small {
    .qpp-c-checkbox__label {
      font-size: v.$font-size-14;
      line-height: v.$line-height-md;
      &::before,
      &::after {
        width: v.$spacing-16;
        height: v.$spacing-16;
      }
    }
  }

  &--indeterminate {
    .qpp-c-checkbox__input {
      &:checked + [class*='__label']::before,
      &:checked:disabled + [class*='__label']::before,
      &:checked[aria-disabled='true'] + [class*='__label']::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' role='img' stroke='transparent' fill='white' viewBox='1.5 1.5 21 21'%3E%3Cpath fill-rule='evenodd' d='M4 11h16v2H4z'/%3E%3C/svg%3E"),
          linear-gradient(transparent, transparent);
      }
    }
  }
}

.qpp-c-checkbox__input {
  // The actual input element is only visible to screen readers, because
  // all visual styling is done via the label.
  @include m.visually-hidden;
  + [class*='__label'] {
    &:hover {
      &::before {
        background-color: v.$gray-04;
      }
    }

    &:active {
      &::after {
        box-shadow: 0 0 0 0.5rem v.$blue-10;
        transition: box-shadow 0.08s ease;
      }
    }
  }

  &:focus {
    outline: none;

    + [class*='__label']::before {
      @include m.focus-ring;
    }
  }

  &:disabled,
  &[aria-disabled='true'] {
    + [class*='__label'] {
      color: rgba(27, 27, 27, 0.3); // TODO: DS styles

      &:active {
        &::after {
          box-shadow: 0 0 0 0 transparent;
        }
      }
    }
    + [class*='__label'],
    + [class*='__label']::before {
      cursor: not-allowed;
    }
    + [class*='__label']::before {
      background-color: v.$gray-10;
      border: f.rem(1px) solid v.$gray-10;
    }
  }

  // Checkboxes with tap-friendly targets
  &--tile {
    // TODO: designs and styles for "tile" mode to support friendler
    // mobile tap targets for checkboxes and radios (USWDS feature).
    + [class*='__label'] {
      background-color: v.$white;
      border: 2px solid rgba(27, 27, 27, 0.3);
      color: #1b1b1b;
      border-radius: 0.25rem;
      margin-top: v.$spacing-8;
      padding: v.$spacing-12 v.$spacing-16 v.$spacing-12 v.$spacing-40;

      &::before {
        left: v.$spacing-8;
      }
    }
  }

  &:checked + [class*='__label']::before,
  &:checked:disabled + [class*='__label']::before,
  &:checked[aria-disabled='true'] + [class*='__label']::before {
    background-position: center center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' role='img' stroke='transparent' fill='white' viewBox='1.5 1.5 21 21'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E"),
      linear-gradient(transparent, transparent);
    background-repeat: no-repeat;
    @media print {
      background-image: none;
      background-color: v.$white;
      content: '\2714';
      text-align: center;
    }

    @media (forced-colors: $-forced-color-active) {
      background-color: ButtonText;

      &--tile {
        background-color: ButtonText;
      }
    }
  }

  &:checked:not(:disabled, [aria-disabled='true']) {
    + [class*='__label']::before {
      background-color: v.$blue-60;
      border: f.rem(1px) solid v.$blue-60;
    }
  }

  &:checked:not(:disabled, [aria-disabled='true']) + [class*='__label'] {
    &:hover {
      &::before {
        background-color: v.$blue-70;
      }
    }
  }
}

.qpp-c-checkbox__label,
.qppds .qpp-c-checkbox__label,
.qpp-prose .qpp-c-checkbox__label {
  cursor: pointer;
  display: inherit;
  font-weight: v.$font-regular;
  margin-top: v.$spacing-12;
  padding-left: v.$spacing-32;
  position: relative;

  &::before {
    content: ' ';
    background: v.$white;
    border: 1px solid v.$gray-80;
    border-radius: 3px;
    box-sizing: border-box;
    display: block;
    top: 0;
    left: 0;
    margin-left: 0;
    margin-top: 0;
    position: absolute;
    z-index: 1;
  }

  &::after {
    content: ' ';
    background: none;
    border-radius: 1rem;
    box-sizing: border-box;
    display: block;
    top: 0;
    left: 0;
    margin-left: 0;
    margin-top: 0;
    position: absolute;
    z-index: 0;
    box-shadow: 0 0 0 0 transparent;
    transition: box-shadow 0.5s ease 0.04s;
  }
}

.qpp-c-checkbox__label-description {
  display: block;
  //font-size: v.$font-size-base;
  margin-top: v.$spacing-16;
}
/* stylelint-enable selector-max-specificity, max-nesting-depth, selector-max-compound-selectors, value-list-comma-newline-after */