@use '../../internals/Box/styles/index' as box;
@use '../../styles/colors/colors-base' as colors;
@use '../../styles/mixins/utilities' as utils;
@use '../../styles/mixins/color-modes' as color-modes;
@use '../../styles/mixins/input' as input;
@use './variables';
@use './mixin';

.rs-checkbox {
  display: var(--rs-checkbox-display);

  @include input.check-radio-base;

  [type='checkbox']:focus-visible ~ .rs-checkbox-inner::before {
    @include utils.focus-ring;
  }
}

.rs-checkbox-checker {
  position: relative;
  display: inline-flex;

  > label {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--rs-spacing) * 2);
  }
}

.rs-checkbox-control {
  &::before,
  .rs-checkbox-inner::before,
  .rs-checkbox-inner::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    display: block;
  }

  // Check mark
  .rs-checkbox-inner::after {
    opacity: 0;
    transform: rotate(45deg) scale(0);
    transition:
      opacity 0.2s ease-in,
      transform 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46);

    @include color-modes.high-contrast-mode {
      transition: none;
    }

    .rs-checkbox[data-checked='true'] &,
    .rs-checkbox[data-checked='mixed'] & {
      border: solid var(--rs-checkbox-icon);
      width: 6px;
      height: 9px;
      margin-top: 2px;
      margin-inline-start: 5px;
      opacity: 1;
    }

    .rs-checkbox[data-checked='true'] & {
      border-width: 0 2px 2px 0;
      transform: rotate(45deg) scale(1);
    }

    .rs-checkbox[data-checked='mixed'] & {
      border-width: 0 0 2px;
      transform: rotate(0deg) scale(1);
      width: 10px;
      margin-top: 0;
      margin-inline-start: 3px;
    }
  }
}

.rs-checkbox-control {
  position: relative;
  display: inline-flex;

  [type='checkbox'] {
    opacity: 0;
    width: var(--rs-checkbox-size);
    height: var(--rs-checkbox-size);
    z-index: 1;
  }

  &::before,
  .rs-checkbox-inner::before,
  .rs-checkbox-inner::after {
    width: var(--rs-checkbox-size);
    height: var(--rs-checkbox-size);
  }

  // Ripple effect area
  &::before {
    @include mixin.checkbox-inner-wrap(var(--rs-checkbox-checked-bg));

    transform: scale(1);
    opacity: 0.7;
    visibility: hidden;
    transition:
      transform 0.2s linear,
      opacity 0.2s linear;

    @include color-modes.high-contrast-mode {
      transition: none;
    }

    .rs-checkbox[data-checked='true'] & {
      transform: scale(1.5);
      opacity: 0;
      visibility: visible;
    }
  }

  // Out border
  .rs-checkbox-inner::before {
    @include mixin.checkbox-inner-wrap(var(--rs-checkbox-border));

    transition:
      background 0.2s linear,
      border 0.2s linear,
      box-shadow 0.2s linear;

    @include color-modes.high-contrast-mode {
      transition: none;
    }

    label:hover & {
      border-color: var(--rs-checkbox-checked-bg);
    }

    .rs-checkbox[data-disabled='true'][data-checked='false'] & {
      border-color: var(--rs-checkbox-disabled-bg);
      background-color: var(--rs-checkbox-disabled-bg);
    }

    .rs-checkbox[data-checked='true'] &,
    .rs-checkbox[data-checked='mixed'] & {
      border-color: var(--rs-checkbox-checked-bg);
      background-color: var(--rs-checkbox-checked-bg);
    }

    .rs-checkbox[data-disabled='true'][data-checked='true'] &,
    .rs-checkbox[data-disabled='true'][data-checked='mixed'] & {
      opacity: 0.5;
    }
  }
}

@each $color in colors.$spectrum {
  .rs-checkbox[data-color='#{$color}'] {
    --rs-checkbox-checked-bg: var(--rs-#{'' + $color}-500);
    --rs-checkbox-border: var(--rs-#{'' + $color}-500);
  }
}