/**
 * Checkbox
 * @define checkbox
 */

@use 'sass:map';
@use '@ecl/mixins-typography/mixins';
@use '@ecl/utility-screen-reader/screen-reader';

// Exposed variables
$theme: null !default;
$checkbox: null !default;

.ecl-checkbox {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  margin: 0;
  position: relative;
}

.ecl-checkbox__input {
  @include screen-reader.sr-only;
}

.ecl-checkbox__label {
  color: map.get($checkbox, 'label', 'color');
  display: inline-flex;
  max-width: var(--max-w);
  padding-block: map.get($checkbox, 'item-spacing');
  white-space: pre-wrap;

  @include mixins.responsive-font(map.get($checkbox, 'label', 'font'));

  @if map.has-key($checkbox, 'hover-circle') {
    &:hover .ecl-checkbox__box:not(.ecl-checkbox__box--disabled)::before {
      @each $property, $value in map.get($checkbox, 'hover-circle') {
        #{$property}: $value;
      }
    }
  }
}

.ecl-checkbox__box {
  align-items: center;
  background: map.get($checkbox, 'background');
  border: map.get($checkbox, 'border-width') solid
    map.get($checkbox, 'border-color');
  border-radius: map.get($checkbox, 'border-radius');
  box-sizing: border-box;
  display: inline-flex;
  flex-shrink: 0;
  height: map.get($checkbox, 'box-size');
  justify-content: center;
  margin-block-start: map.get($checkbox, 'box-offset');
  margin-inline-end: var(--s-xs);
  position: relative;
  user-select: none;
  width: map.get($checkbox, 'box-size');
}

.ecl-checkbox__box:not(.ecl-checkbox__box--disabled) {
  cursor: pointer;
}

.ecl-checkbox__help {
  box-sizing: border-box;
  color: map.get($checkbox, 'help', 'color');
  display: block;
  margin-block: map.get($checkbox, 'help', 'margin-block');
  max-width: var(--max-w);
  padding: 0;

  @include mixins.responsive-font(map.get($checkbox, 'help', 'font'));
}

.ecl-checkbox__icon {
  fill: map.get($checkbox, 'checkbox-fill');
  visibility: hidden;
}

// Disabled.
.ecl-checkbox--disabled {
  .ecl-checkbox__label {
    color: map.get($checkbox, 'disabled', 'color');
    cursor: not-allowed;
  }

  .ecl-checkbox__input:checked ~ .ecl-checkbox__label {
    .ecl-checkbox__box {
      opacity: 0.5;
    }
  }
}

.ecl-checkbox__box--disabled {
  border-color: map.get($checkbox, 'disabled', 'border-color');
}

// Required
.ecl-checkbox__required {
  color: map.get($checkbox, 'required', 'color');
  margin-inline: map.get($checkbox, 'required', 'margin-inline');

  @include mixins.responsive-font(
    map.get($checkbox, 'required', 'font'),
    $font-weight: map.get($checkbox, 'required', 'font-weight')
  );
}

// Checked and indeterminate
// stylelint-disable no-descending-specificity
.ecl-checkbox__input:checked ~ .ecl-checkbox__label {
  .ecl-checkbox__box {
    background: map.get($checkbox, 'checked', 'background-color');
    border-color: map.get($checkbox, 'checked', 'border-color');
  }

  &:hover .ecl-checkbox__box {
    background: map.get($checkbox, 'checked', 'background-color-hover');
    border-color: map.get($checkbox, 'checked', 'background-color-hover');
  }

  .ecl-checkbox__box--invalid {
    background: map.get($checkbox, 'invalid', 'background-color');
    border-color: map.get($checkbox, 'invalid', 'border-color');
  }

  .ecl-checkbox__icon {
    visibility: visible;
  }
}

// Invalid
.ecl-checkbox--invalid {
  .ecl-checkbox__box {
    border-color: map.get($checkbox, 'invalid', 'border-color');
  }
}

.ecl-checkbox--invalid
  .ecl-checkbox__label:hover
  .ecl-checkbox__box:not(.ecl-checkbox__box--disabled) {
  border-color: map.get($checkbox, 'invalid', 'border-color');
}

/* stylelint-disable-next-line plugin/selector-bem-pattern, selector-max-compound-selectors */
.ecl-checkbox--invalid
  input:checked
  ~ .ecl-checkbox__label:hover
  .ecl-checkbox__box:not(.ecl-checkbox__box--disabled) {
  background-color: map.get($checkbox, 'invalid', 'background-color');
}

// Focus state
.ecl-checkbox__input:focus-visible
  ~ .ecl-checkbox__label
  .ecl-checkbox__box:not(.ecl-checkbox__box--disabled) {
  outline: 2px solid var(--cm-border-primary);
  outline-offset: 2px;

  @if map.has-key($checkbox, 'hover-circle') {
    &::before {
      @each $property, $value in map.get($checkbox, 'hover-circle') {
        #{$property}: $value;
      }
    }
  }

  .ecl-checkbox--invalid & {
    outline-color: map.get($checkbox, 'invalid', 'border-color');
  }
}

.ecl-form-group:has(.ecl-checkbox--single):has(.ecl-form-label--hidden) {
  .ecl-form-label__required,
  .ecl-form-label__optional {
    display: none;
  }

  .ecl-checkbox--single {
    .ecl-form-label__required,
    .ecl-form-label__optional {
      display: flex;
      margin-inline-start: var(--s-2xs);
    }
  }
}