:root {
    --clr-primary-800: hsl(213, 100%, 26%);
    --clr-brand: var(--clr-primary-800);

    --form-input-text-border: #D8D8D8;
    --form-input-text-border-focus: var(--clr-brand);

    --btn-primary-clr-text: white;
    --btn-primary-clr-text-hover: white;
    --btn-primary-clr-surface: hsl(213, 100%, 26%);
    --btn-primary-clr-surface-hover: hsl(213, 100%, 16%);
}

:where(.gcc) {
    input, select, textarea {
        outline: 0;
        background: white;
    }

    .input {
        border: 1px solid var(--form-input-text-border);
        padding: .375rem .75rem;
        width: 100%;
        display: block;
        font-weight: 400;
        border-radius: 0.3125rem;
    }
    /* Site style will apply outline
    .input:where(:focus-visible) {
        border: 1px solid var(--form-input-text-border-focus);
        box-shadow: 0 0 0 1px var(--form-input-text-border-focus) inset;
    }
    */

    .e5-error.e5-error {
        border-color: rgb(211 43 43);
        background-color: rgb(255 240 231);
    }


    .e5-btn {
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
        padding-left: 1rem;
        padding-right: 1rem;
        border-radius: 0.3125rem;
        font-weight: 600;
    }
    .e5-btn-primary {
        background: var(--btn-primary-clr-surface); 
        color: var(--btn-primary-clr-text);
    }
    .e5-btn-primary:hover {
        background: var(--btn-primary-clr-surface-hover);
        color: var(--btn-primary-clr-text-hover);
    }


    /* Copied over from estravel-web\src\styles\notifications.css */
    .notification {
        border-radius: 0.375rem;
        border-width: 1px;
        border-color: rgb(145 205 130);
        background-color: rgb(209 242 201);

        padding-left: 0.625rem;
        padding-right: 0.625rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        
        &@media (min-width: 1024px) {
            padding-left: 1.25rem;
            padding-right: 1.25rem;
            padding-top: 0.875rem;
            padding-bottom: 0.875rem;
        }
        font-weight: 600;
        color: rgb(26 26 26);
    }
    .notification--alert {
        border-color: rgb(255 158 104);
        background-color: rgb(255 240 231);
    }


    /* Start app specific styles */
    button[data-loading='true'] {
        cursor: default;
        opacity: 50%;
    }
    button[data-loading='true']>*:nth-child(1) {
        display: none;
    }
    button[data-loading='false']>*:nth-child(2) {
        display: none;
    }
}