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

p-tableradiobutton.p-element,
p-radiobutton.p-element {
    gap: $spacing-1;

    &.ng-dirty.ng-invalid {
        .p-radiobutton:not(.p-radiobutton-disabled) {
            border-color: $color-alert-red;
        }
    }

    .p-radiobutton {
        height: 1.5rem;
        aspect-ratio: 1/1;
        border-radius: 50%;
        border: $select-border-size solid $color-palette-gray-400;

        .p-radiobutton-box {
            height: 1.25rem;
            border-radius: inherit;
            aspect-ratio: inherit;

            .p-radiobutton-icon {
                height: 0.875rem;
                aspect-ratio: inherit;
                border-radius: inherit;
            }
        }

        &.p-radiobutton-checked {
            border-color: $color-palette-primary-500;

            .p-radiobutton-box.p-highlight {
                .p-radiobutton-icon {
                    background-color: $color-palette-primary-500;
                }
            }
        }

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

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

    .p-radiobutton-label {
        font-size: $font-size-md;

        &.p-disabled {
            color: $color-palette-gray-500;
        }
    }

    &:hover:not(:has(.p-radiobutton-disabled)) {
        cursor: pointer;

        .p-radiobutton {
            border-color: $color-palette-primary-400;
        }

        .p-radiobutton-label:hover {
            cursor: pointer;
        }
    }

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