@use '../../abstract';

$input-this: '.cds-checkbox-input';

@mixin input-hover {
  border-color: var(--gray-700);
  background-color: var(--gray-100);
  border-radius: 4px;
}

@mixin input-circle {
  border-radius: 50%;

  input,
  #{$input-this}__ico,
  &:hover {
    border-radius: 50% !important;
  }
}

.cds-checkbox-input {
  $size: 16px;
  $radius: 4px;

  @include abstract.relative();

  flex: none;
  display: inline-block;
  width: $size;
  height: $size;
  line-height: 1;
  background-color: var(--base-white);

  &.destructive {
    :where(input) {
      border-color: var(--primary-red-600);

      &:focus {
        border-color: var(--primary-red-600);
        box-shadow: var(--shadow-xs-focused-4px-error-100);
      }
    }
  }

  :where(input) {
    @include abstract.absolute($top: 0, $left: 0);

    z-index: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--gray-200);
    font: inherit;
    border-radius: $radius;

    &:hover {
      border-color: var(--gray-700);
    }

    &:focus,
    &:checked {
      border-color: var(--gray-400);
      outline: none;
    }

    &:focus {
      box-shadow: var(--focus-ring-4px-gray-100);
    }

    &:disabled {
      border-color: var(--gray-200);
    }
  } // input

  &:hover {
    background-color: var(--gray-100);
    border-radius: $radius;
  }

  &__ico {
    @include abstract.absolute($top: 0, $left: 0);

    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: abstract.em($radius);
  } // ico

  :not(input:checked + #{$input-this}__ico) > svg {
    display: none;
  }

  :disabled + #{$input-this}__ico {
    background-color: var(--gray-100);
    border-radius: $radius;
  }

  // size (md)
  // ===========================
  &--md {
    width: $size + 4px;
    height: $size + 4px;
  } //md
}

// radio
// =======================================
.cds-checkbox-input--radio {
  $this: &;

  @include input-circle();

  #{$input-this}__ico::before {
    @include abstract.absolute($top: 50%, $left: 50%);

    content: '';
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
  } // before

  &:where(#{$input-this}--md) #{$input-this}__ico::before {
    width: 8px;
    height: 8px;
  }

  :where(input:checked + #{$input-this}__ico)::before {
    background-color: var(--gray-700);
  }

  :where(input:checked:disabled + #{$input-this}__ico)::before {
    background-color: var(--gray-200);
  }
}

// check circle
// =======================================
.cds-checkbox-input--check-circle {
  @include input-circle();

  :where(input:checked) {
    border-color: var(--gray-700);
  }

  :where(input:checked + #{$input-this}__ico) {
    background-color: var(--gray-700);
  }

  input:disabled + #{$input-this}__ico {
    background-color: var(--gray-200);
  }
}