:root,
:host {


    --wa-color-neutral-fill-loud: var(--wa-color-neutral-90);
    /*Typography*/
    --wa-font-family-body: "Reddit Sans";
    --wa-font-family-heading: "Reddit Sans";
    --wa-form-control-required-content: "";
    --wa-form-control-required-content-offset: 0;
    /* Components customization */
    [slot="label"] {
        color: var(--wa-color-richblack);
        font-weight: 600;
        font-size: 14px;
    }

    [slot="hint"] {
        color: var(--wa-color-richblack-40);
        font-weight: 500;
        font-size: 14px;
    }

    [slot="placeholder"] {
        color: var(--wa-color-richblack-40);
        font-weight: 500;
        font-size: 14px;
    }

    wa-input::part(base) {
        background: var(--wa-color-neutral);
        border: 0;

    }

    wa-button::part(label) {
        font-weight: bold;
        font-size: 1rem;
    }

    wa-button::part(base) {
        border-radius: var(--wa-border-radius-pill);
        padding: 24px 16px;
    }

    wa-button[variant="neutral"]::part(base) {
        color: var(--wa-color-richblack);
    }

    wa-button[variant="gradient"]::part(base) {
        background: linear-gradient(235deg, #6E61FF 0%, #FC6A6A 100%);
    }

    wa-button[variant="gradient"]::part(base):hover {
        background: linear-gradient(235deg,
        color-mix(in srgb, #6E61FF 90%, black 10%) 0%,
        color-mix(in srgb, #FC6A6A 90%, black 10%) 100%
        );
    }

    wa-button .material-symbols-rounded{
        display: block;
        margin: auto;
    }

    wa-button {
        wa-icon {
            font-size: 24px;
            margin-right: 0;
        }

        font-size: 14px;
    }

    wa-textarea::part(base){
        background: var(--wa-color-lightgray);
        border: 0;
        resize: none;
        overflow: auto;
    }

    wa-select::part(combobox) {
        border: 0;
        background: var(--wa-color-lightgray);
    }

    wa-select::part(listbox){
        max-height: 400px;
    }

    wa-select {
        color: var(--wa-color-brand-fill-loud);
    }

    wa-select::part(tag) {
        border: 0;
        background: var(--wa-color-indigo);
        color: var(--wa-color-brand-fill-loud);
    }

    wa-select::part(tag__remove-button) {
        font-size: 9px;
        fill: var(--wa-color-brand-fill-loud) !important;
    }

    wa-select span.material-symbols-rounded {
        margin-inline-start: 0;

    }

    .form-error{

    }


}

/*
    workaround to make bs5 buttons coexist with wa
*/

button.btn {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


.wa-form{
    padding: 8px;
}