@layer base;

@layer base {
    :root {
        --sor-topline: #006DB8;
        --sor-headline: #00a6e0;
        --sor-text: #507182;
        --sor-bg-card: #fdfdfd;
        --sor-bg: #f0f2ed;
        --sor-bg-input: #fff;
        --sor-border-output: #e2e5dc;
        --sor-input: #70cdee;
        --sor-output: #76b82a;
    }

    .sor-upper {
        text-transform: uppercase;
    }

    .sor-container {
        padding: 2.5rem 2.5rem 2.5rem 3.13rem;
        background-color: var(--sor-bg);
        font-family: 'Source Sans Pro', sans-serif;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.62rem;
    }

    .sor-inner {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 2.0625rem;
    }

    .sor-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        align-self: stretch;
    }

    .sor-topline {
        color: var(--sor-topline);
        font-size: 0.9375rem;
        font-weight: 300;
        letter-spacing: 0.1875rem;
    }

    .sor-headline {
        color: var(--sor-headline);
        font-size: 2.625rem;
        font-weight: 300;
        line-height: 3rem;
    }

    .sor-body {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        align-self: stretch;
    }

    .sor-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        border-radius: 0.75rem;
        gap: 0.125rem;
        overflow: hidden;
    }

    .sor-card-head {
        display: flex;
        padding: 0.5rem 1.25rem;
        align-items: center;
        align-self: stretch;
        background-color: var(--sor-bg-card);
    }

    .sor-card-title {
        color: var(--sor-topline);
        font-size: 1.625rem;
        font-weight: 400;
    }

    .sor-card-body {
        display: flex;
        padding: 1.25rem;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
        background-color: var(--sor-bg-card);
    }

    .sor-card-text {
        color: var(--sor-topline);
        font-size: 1rem;
        font-style: italic;
        font-weight: 400;
    }

    .sor-card-input {
        position: relative;
        display: flex;
        align-items: center;

        svg {
            position: absolute;
            left: 0.5rem;
            width: 1.5rem;
            height: 1.5rem;
            pointer-events: none;

            path {
                stroke: var(--sor-topline);
            }
        }

        label {
            color: var(--sor-topline);
            font-size: 1rem;
            font-weight: 400;
            position: absolute;
            right: 0.5rem;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
        }

        .sor-card-output-element {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 0.19rem 0.5rem;
            border: 1px solid var(--sor-input);
            border-radius: 0.1875rem;
            background-color: var(--sor-bg-input);
            font-size: 1rem;
            font-weight: 400;
            color: var(--sor-topline);
            min-width: 6.5rem;
            box-sizing: border-box;

            span {
                padding-right: 0.25rem;
            }
        }
    }

    .sor-input-element,
    .sor-select-element {
        text-align: right;
        padding: 0.5rem 1.75rem;
        border: 1px solid var(--sor-input);
        border-radius: 0.1875rem;
        background-color: var(--sor-bg-input);
        font-size: 1rem;
        font-weight: 400;
        color: var(--sor-topline);
        outline: none;
        width: 5.56rem;
        appearance: none;
        box-sizing: content-box;
    }

    .sor-input-element {
        -moz-appearance: textfield;
    }

    .sor-select-element {
        cursor: pointer;
    }

    .sor-output {
        .sor-card-title {
            color: var(--sor-output);
        }

        .sor-card-output-element {
            border-color: var(--sor-border-output);
            color: var(--sor-output);

            span {
                font-weight: 700;
            }
        }
    }

    .sor-input-element::-webkit-outer-spin-button,
    .sor-input-element::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .sor-input-element::-webkit-calendar-picker-indicator {
        display: none !important;
    }

    .sor-card-footer {
        display: flex;
        padding: 1.25rem 1.25rem 1.25rem 4.31rem;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        align-self: stretch;
        background-color: var(--sor-bg-card);
        gap: 0.5rem;
    }

    .sor-card-footer-row {
        display: flex;
        align-items: center;
        gap: 0.75rem;

        img {
            width: 2rem;
            height: 2rem;
        }
    }

    .sor-footer {
        color: var(--sor-text);
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.375rem;
        padding: 0 1.25rem;
    }
}