@import "./vars.pcss";

@define-mixin checkerInvalid {
  --checkerBg: var(--checkerInvalidBg);
  --checkerBorderColor: var(--checkerInvalidBorderColor);
  --checkerIconTransform: var(--checkerInvalidIconTransform);
  --checkerIconOpacity: var(--checkerInvalidIconOpacity);
  --checkerIconFilter: var(--checkerInvalidIconFilter);
  --checkerLabelColor: var(--checkerInvalidLabelColor);
}

.radio,
.checkbox {
  cursor: var(--checkerCursor);
  display: var(--checkerDisplay);
  position: var(--checkerPosition);
  user-select: var(--checkerUserSelect);
  pointer-events: var(--checkerPointerEvents);

  &&.isHover,
  &&--isHover,
  &&:hover {
    @media (hover: hover) {
      --checkerBg: var(--checkerHoverBg);
      --checkerBorderColor: var(--checkerHoverBorderColor);
      --checkerIconOpacity: var(--checkerHoverIconOpacity);
      --checkerIconFilter: var(--checkerHoverIconFilter);
      --checkerIconTransform: var(--checkerHoverIconTransform);
    }
  }

  &&.isInvalid,
  &&--isInvalid {
    @mixin checkerInvalid;
  }

  &:has(input:focus-visible) {
    .radio,
    .checkbox {
      &__emulator {
        outline: var(--checkerFocusVisibleOutline);
        outline-offset: var(--checkerFocusVisibleOutlineOffset);
      }
    }
  }

  /* stylelint-disable */
  &__input {
    @mixin visuallyHidden;

    &:checked ~ [class$="__emulator"] {
      --checkerBg: var(--checkerCheckedBg);
      --checkerBorderColor: var(--checkerCheckedBorderColor);
      --checkerIconTransform: var(--checkerCheckedIconTransform);
      --checkerIconFilter: var(--checkerCheckedIconFilter);
      --checkerIconOpacity: var(--checkerCheckedIconOpacity);
    }

    &:checked[disabled] ~ [class$="__emulator"] {
      --checkerIconFilter: var(--checkerDisabledIconFilter);
    }

    &:checked[disabled] ~ [class$="__emulator"],
    &[disabled] ~ [class$="__emulator"] {
      --checkerIconTransform: var(--checkerDisabledIconTransform);
      --checkerIconFilter: var(--checkerDisabledIconFilter);
      --checkerCursor: var(--checkerDisabledCursor);
      --checkerBg: var(--checkerDisabledBg);
      --checkerBorderColor: var(--checkerDisabledBorderColor);
    }

    &:not(:checked)[disabled] ~ [class$="__emulator"] {
      --checkerIconOpacity: var(--checkerDisabledIconOpacity);
    }

    &[disabled] ~ [class$="__label"] {
      cursor: var(--checkerDisabledCursor);
      color: var(--checkerDisabledLabelColor);
    }

    &--isInvalid:not(:checked) ~ [class$="__emulator"],
    &.isInvalid:not(:checked) ~ [class$="__emulator"] {
      @mixin checkerInvalid;
    }
  }
  /* stylelint-enable */

  &__emulator {
    flex-shrink: 0;
    pointer-events: auto;
    cursor: var(--checkerCursor);
    width: var(--checkerSize);
    height: var(--checkerSize);
    border-radius: var(--checkerBorderRadius);
    background: var(--checkerBg);
    border-width: var(--checkerBorderWidth);
    border-color: var(--checkerBorderColor);
    border-style: var(--checkerBorderStyle);
    @mixin flexCenter;
    @mixin transition var(--checkerTransition);

    &::after {
      content: "";
      width: var(--checkerIconWidth);
      height: var(--checkerIconHeight);
      background: var(--checkerIconBg);
      filter: var(--checkerIconFilter);
      transform: var(--checkerIconTransform);
      opacity: var(--checkerIconOpacity);
      border-radius: var(--checkerIconBorderRadius);
      transform-origin: 50% 50%;
      @mixin transition var(--checkerIconTransition);
    }
  }

  &__label {
    display: var(--checkerLabelDisplay);
    padding: var(--checkerLabelPadding);
    color: var(--checkerLabelColor);
    cursor: var(--checkerCursor);
    pointer-events: auto;
    @mixin transition var(--checkerTransition);
  }
}