@layer ui.input {
  .root {
    cursor: var(--custom-cursor, pointer);

    position: relative;

    display: grid;
    flex-shrink: 0;
    place-items: center;

    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    border: 0.125rem solid var(--ui-border-color, var(--color-borders-input));
    border-radius: 0.25rem;

    appearance: none;
    background-color: var(--ui-bg-color, transparent);

    transition: border-color 0.15s ease, background-color 0.15s ease;

    &::before {
      content: "";

      transform: scale(0.8);

      box-sizing: border-box;
      width: 0;
      height: 0;
      border: 0 solid transparent;
      border-radius: 0;

      opacity: 0;
      background-color: transparent;

      transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    }

    &:checked {
      border-color: var(--ui-accent-color, var(--color-primary));
      background-color: var(--ui-accent-color, var(--color-primary));

      &::before {
        transform: rotate(45deg) translate(-0.0625rem, -0.03125rem);

        width: 0.375rem;
        height: 0.625rem;
        border-color: var(--ui-check-color, white);
        border-style: solid;
        border-width: 0 0.125rem 0.125rem 0;

        opacity: 1;
      }
    }

    &:indeterminate {
      border-color: var(--ui-accent-color, var(--color-primary));
      background-color: var(--ui-accent-color, var(--color-primary));

      &::before {
        transform: none;

        width: 0.625rem;
        height: 0.125rem;
        border-width: 0;
        border-radius: 9999px;

        opacity: 1;
        background-color: var(--ui-check-color);
      }
    }

    &:disabled {
      cursor: default;
      opacity: var(--input-disabled-opacity, 0.5);
    }

    &:focus-visible {
      outline: 2px solid var(--ui-accent-color, var(--color-primary));
      outline-offset: 2px;
    }
  }

  .round {
    border-radius: 50%;
  }

  .invalid {
    border-color: var(--color-error);

    &:checked,
    &:indeterminate {
      border-color: var(--color-error);
      background-color: var(--color-error);
    }

    &:focus-visible {
      outline-color: var(--color-error);
    }
  }
}
