@import (reference) "./mixins/_logical-properties.less";

.tw-checkbox-check {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 8px;

  &::before,
  &::after {
    content: "";
    position: absolute;
    background: var(--color-background-screen);
    transform: translateX(0.5px) rotate(-45deg);
    transform-origin: left bottom;
    left: var(--size-8);
  }

  .has-error {
    &::before,
    &::after {
      background-color: var(--color-interactive-negative);
    }
  }

  &::before {
    top: 9px;
    height: 6px;
    width: 2px;
  }

  &::after {
    bottom: 5px;
    height: 2px;
    width: 11px;
  }
}