/* Recommended to edit file in external code editor as Visual Studio CSS does not fully support nesting */

.color-palette-bar {
    display: flex;
    width: 100%;
    height: 10px;

    .palette {
        height: 100%;
    }

    .seafoam {
        background: var(--color-seafoam);
        flex: 2;
    }

    .lilac {
        background: var(--color-lilac);
        flex: 1;
    }

    .stone {
        background: var(--color-stone);
        flex: 1.75;
    }

    .empire-blue {
        background: var(--color-empire-blue);
        flex: 2;
    }

    .slate {
        background: var(--color-slate);
        flex: 2;
    }

    .navy {
        background: var(--color-navy);
        flex: 1;
    }
}

.homepage {
    .color-palette-bar {
        height: 12px;
        margin-bottom: 40px;

        @media (min-width: 768px) {
            height: 20px;
        }
    }
}