@use "../../../../styles/tools/generate";
@use "../../../../styles/tools/convert";
@use "../../styles/mixins" as commonMixins;
@use "./config";
@use "./mixins";
@use "../../../../styles/tokens/color";

@layer components {
  .checkbox {
    @include commonMixins.radiocheck-input();
    @include commonMixins.radiocheck-states(
      $config: config.$states,
      $display-selector: ".checkbox-display"
    );

    @each $size, $values in config.$sizes {
      &#{generate.variant-name($size)},
      &#{generate.variant-name($size)} + .checkbox-display {
        @include commonMixins.radiocheck-size($size, config.$sizes);
      }
    }
  }

  .checkbox-display {
    border-radius: convert.to-rem(5px);
  }

  .checkbox--toggle .checkbox,
  .checkbox--toggle .checkbox + .checkbox-display {
    width: convert.to-rem(60px);
    height: convert.to-rem(30px);
  }

  .checkbox--toggle .checkbox {
    z-index: 1;
  }

  .checkbox--toggle .checkbox + .checkbox-display {
    position: relative;
    background: var(--color-fill-contrast);
    border-color: var(--color-fill-contrast);
    background-image:
      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3 7L1 9l5 5L16 4l-2-2-8 8-3-3z' fill='%23fff'/%3E%3C/svg%3E"),
      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M12 2L10 0L6 4L2 0L0 2L4 6L0 10L2 12L6 8L10 12L12 10L8 6L12 2Z' fill='%23fff'/%3E%3C/svg%3E");

    .is-dark & {
      background-image:
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3 7L1 9l5 5L16 4l-2-2-8 8-3-3z' fill='%23fff'/%3E%3C/svg%3E"),
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M12 2L10 0L6 4L2 0L0 2L4 6L0 10L2 12L6 8L10 12L12 10L8 6L12 2Z' fill='%23000'/%3E%3C/svg%3E");
    }
    background-position:
      5px center,
      right 7px center;
    background-repeat: no-repeat;

    &::after {
      content: "";
      pointer-events: none;
      position: absolute;
      background: var(--color-fill-primary);
      top: 0;
      left: 0;
      width: 50%;
      height: 100%;
      transform: translateX(0);
      transition: transform 200ms ease-out;
      border-radius: convert.to-rem(3px);
    }
  }

  .checkbox--toggle .checkbox:checked + .checkbox-display {
    background-color: var(--color-surface-tertiary);
    border-color: var(--color-surface-tertiary);

    &::after {
      transform: translateX(100%);
    }
  }

  .checkbox--toggle .checkbox:disabled + .checkbox-display {
    background-color: var(--color-surface-moderate);
    border-color: var(--color-surface-moderate);
  }

  .checkbox--toggle .checkbox.is-invalid + .checkbox-display {
    border-color: var(--color-icon-negative);
    background-color: var(--color-icon-negative);
  }

  .checkbox--toggle .checkbox:disabled + .checkbox-display,
  .checkbox--toggle .checkbox.is-invalid + .checkbox-display {
    background-image:
      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3 7L1 9l5 5L16 4l-2-2-8 8-3-3z' fill='%23fff'/%3E%3C/svg%3E"),
      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M12 2L10 0L6 4L2 0L0 2L4 6L0 10L2 12L6 8L10 12L12 10L8 6L12 2Z' fill='%23fff'/%3E%3C/svg%3E");
  }
}