@import "tailwindcss/theme";
@import "../variables/theme.css";

.checkbox {
  * {
    @apply cursor-pointer;
  }
}

.checkbox-input {
  flex: none;
  width: var(--spacing-20);
  height: var(--spacing-20);
  padding: var(--spacing-2);
  appearance: none;
  background: var(--color-white);
  border-radius: var(--spacing-2);
  transform: translateY(0.1lh);

  &:checked {
    background: url("../../images/icon-checkbox.svg") center / calc(100% + 4px)
      no-repeat;
  }

  &:disabled,
  &:disabled + * {
    opacity: 0.4;
  }
}

.checkbox-label {
  font: var(--t4-medium);
  color: var(--color-white);
}