@use "variables" as *;

:host {
    form {
        max-width: 64.25rem;
    }

    textarea {
        font-family: $font-code;
        max-height: 21.5rem;
        overflow: auto !important;
    }

    ::ng-deep {
        .p-field-hint {
            markdown pre {
                background-color: $color-palette-secondary-100;
                padding: $spacing-0 $spacing-1;

                // This padding prevents the code to overlap between lines
                code {
                    padding: 0;
                }
            }
        }
    }
}

.p-field {
    margin-bottom: $spacing-4;

    label {
        display: block;
    }

    input,
    textarea {
        font-size: $font-size-lmd;
        width: 100%;
    }

    dot-icon {
        color: $color-palette-primary;
        margin-left: $spacing-1;
        vertical-align: middle;
    }

    ::ng-deep {
        p-dropdown .p-dropdown {
            min-width: 14.28rem;
            margin-bottom: $spacing-1;
        }

        p-checkbox label {
            font-size: $font-size-lmd;
        }

        p-checkbox.required label:before,
        label.required:before {
            color: $red;
            content: "* ";
        }

        markdown p {
            margin: 0;
        }
    }
}
