@use "variables" as *;
@import "common";

p-checkbox.p-element {
    gap: $spacing-1;

    &.ng-dirty.ng-invalid {
        .p-checkbox {
            border-color: $color-alert-red;
        }
    }

    &.p-checkbox-sm {
        .p-checkbox {
            height: 1.25rem;
        }

        .p-checkbox-box {
            height: 1rem;
        }

        .p-checkbox-icon {
            width: $font-size-sm;
            height: $font-size-sm;
        }
    }
}

.p-checkbox {
    height: 1.5rem;
    aspect-ratio: 1/1;
    border-radius: $border-radius-sm;
    border: $select-border-size solid $color-palette-gray-400;
    background-color: $white;

    &.p-checkbox-checked,
    &:has(.p-highlight) {
        border-color: $color-palette-primary-500;
    }

    &.p-checkbox-disabled {
        border-color: $color-palette-gray-400;
        background-color: $color-palette-gray-200;

        .p-checkbox-box.p-highlight {
            .p-checkbox-icon {
                color: $color-palette-gray-400;
            }
        }
    }

    .p-checkbox-box {
        height: 1.25rem;
        aspect-ratio: 1/1;
    }

    & + .p-checkbox-label {
        &.p-disabled {
            color: $color-palette-gray-500;
        }
        &:hover {
            cursor: pointer;
        }
    }

    &:hover:not(:has(.p-checkbox-disabled)) {
        cursor: pointer;
        border-color: $color-palette-primary-400;
    }

    &.p-checkbox-focused {
        outline: $field-border-size solid $color-palette-primary-op-20;
    }
}
