:root,
:host {
    /* Primary */
    --color-primary: #11324b;
    --color-primary-1: #cfd6db;
    --color-primary-2: #b0bbc3;
    --color-primary-3: #8898a5;
    --color-primary-4: #607687;
    --color-primary-5: #395469;
    --color-primary-6: #0e2a3e;
    --color-primary-7: #0b2132;
    --color-primary-8: #081926;
    --color-primary-9: #061119;
    --color-primary-10: #030f0a;

    /* Secondary */
    --color-secondary: #bedaf2;
    --color-secondary-1: #f2f8fc;
    --color-secondary-2: #e9f3fb;
    --color-secondary-3: #deecf8;
    --color-secondary-4: #d4e6f6;
    --color-secondary-5: #c9e0f4;
    --color-secondary-6: #9eb6ca;
    --color-secondary-7: #7f91a1;
    --color-secondary-8: #5f6d79;
    --color-secondary-9: #3f4951;
    --color-secondary-10: #262c30;

    /* Teritary */
    --color-teritary: #e45858;
    --color-teritary-1: #fadede;
    --color-teritary-2: #f6c7c7;
    --color-teritary-3: #f2acac;
    --color-teritary-4: #ed9090;
    --color-teritary-5: #e87474;
    --color-teritary-6: #be4949;
    --color-teritary-7: #983b3b;
    --color-teritary-8: #722c2c;
    --color-teritary-9: #4c1d1d;
    --color-teritary-10: #2e1212;

    /* Greys */
    --color-grey: #3c4856;
    --color-grey-1: #d8dadd;
    --color-grey-2: #bec2c7;
    --color-grey-3: #9ea4aa;
    --color-grey-4: #7d858e;
    --color-grey-5: #5c6672;
    --color-grey-6: #323c48;
    --color-grey-7: #283039;
    --color-grey-8: #1e242b;
    --color-grey-9: #14181d;
    --color-grey-10: #0c0e11;

    /* Green */
    --color-green: #2e7d32;
    --color-green-1: #e8f5e9;

    /* Neutral */
    --color-neutral-black: #0c0e11;
    --color-neutral-white: #fbfdfe;

    /* Text */
    --color-text-black: #0c0e11;
    --color-text-white: #fbfdfe;

    /* Background */
    --color-bg: #11324b;
    --color-bg-dashboard: #cfd6db;
    --color-bg-card: #f5f6f8;
    --color-bg-interactable: #395469;

    /* Border */
    --color-border: #9ea4aa;
    --color-border-btn: #11324b;

    /* States */
    --color-state: #b42318;
    --color-state-hover: #f04438;

    /* Space */
    --space-4: 4px;
    --space-8: 8px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-120: 120px;

    /* Box Shadow */
    --box-shadow:
        0px 4px 8px -2px rgba(10, 13, 18, 0.1),
        0px 2px 4px -2px rgba(10, 13, 18, 0.06);
}

html {
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-black);
    margin: 0;
    padding: 0;
    top: 0 !important;
    position: static !important;
}

p,
ul,
ol,
blockquote,
figure {
    overflow-wrap: break-word;
}

error-message {
    color: var(--color-state) !important;
}

button {
    font-size: var(--space-16);
}

[btn-primary] {
    padding: var(--space-8) var(--space-16);
    color: var(--color-text-white);
    border-radius: var(--space-8);
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

[btn-primary] font {
    color: var(--color-text-white);
}

[btn-primary]:hover {
    background-color: var(--color-primary-3);
    border: 1px solid var(--color-primary-3);
}

[btn-primary]:disabled {
    background-color: var(--color-grey-2);
    border: 1px solid var(--color-grey-2);
}

[btn-secondary] {
    padding: var(--space-8) var(--space-16);
    color: var(--color-grey-8);
    border-radius: var(--space-8);
    background-color: var(--color-neutral-white);
    border-radius: var(--space-8);
    border: 1px solid var(--color-grey-3);
}

[btn-secondary] font {
    color: var(--color-grey-8);
}

[btn-secondary]:hover {
    background-color: var(--color-primary);
    color: var(--color-text-white);
    border: 1px solid var(--color-primary);
}

[btn-secondary]:hover font,
[btn-secondary]:disabled font {
    color: var(--color-text-white);
}

[btn-secondary]:disabled {
    background-color: var(--color-primary-1);
    color: var(--color-text-white);
    border: 1px solid var(--color-primary-1);
}

[btn-teritary] {
    padding: var(--space-8) var(--space-16);
    color: var(--color-text-white);
    border-radius: var(--space-8);
    background-color: var(--color-teritary);
    border-radius: var(--space-8);
    border: 1px solid var(--color-teritary);
}

[btn-teritary] font {
    color: var(--color-text-white);
}

[btn-teritary]:hover {
    background-color: var(--color-teritary-5);
    border: 1px solid var(--color-teritary-5);
}

[btn-teritary]:disabled {
    background-color: var(--color-teritary-1);
    border: 1px solid var(--color-teritary-1);
}

input,
select,
textarea {
    background-color: var(--color-neutral-white);
    border: 1px solid var(--color-grey-3);
    border-radius: var(--space-8);
    outline: unset;
    padding: var(--space-8);
}

select {
    padding: var(--space-8);
}

input:disabled,
select:disabled,
textarea:disabled {
    background-color: var(--color-grey-1);
}

input:invalid,
textarea:invalid {
    border: 1px solid var(--color-teritary-3);
    box-shadow: 0 0 5px 1px var(--color-teritary);
}

input[state-error] {
    border: 1px solid var(--color-state);
}

dialog {
    padding: var(--space-24);
    background-color: var(--color-neutral-white);
    border-radius: var(--space-8);
    border: 0;
    margin: auto;
}

dialog::backdrop {
    backdrop-filter: blur(var(--space-4));
    background-color: rgb(from black r g b / 0.8);
}

body:has(dialog[open]) {
    overflow: hidden;
}

a {
    text-decoration: none;
    color: unset;
}

a:focus {
    outline: none;
}

font:hover {
    pointer-events: none !important;
}

details,
[info-card] {
    display: block;
    padding: var(--space-16);
    background-color: var(--color-bg-card);
    border-radius: var(--space-16);
    box-shadow: var(--box-shadow);
}

summary::marker {
    content: "+ ";
}

details[open] summary::marker {
    content: "-  ";
}

/* details p {
    padding: var(--space-16);
} */

/* details::details-content {
    opacity: 0;
    transition:
        opacity 1s,
        content-visibility 300ms allow-discrete;
}

details[open]::details-content {
    opacity: 1;
} */

[content-box] {
    display: contents;
}

@media (max-width: 480px) {
    dialog {
        /* Initial (closed) styles that act as the end point for exit animation */
        /* transform: translateY(0);
        transition-property: transform, display, overlay;
        transition-duration: 0.5s; */
        /* Allows the 'display' and 'overlay' properties to transition correctly */
        transition-behavior: allow-discrete;
        margin: unset;
    }

    dialog[open] {
        /* Final (open) styles */
        transform: translateY(0);

        /* Starting styles for the entry transition */
        @starting-style {
            transform: translateY(100%);
            /* Starts from above the final position */
        }
    }
}