.color-input-modal-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    background-color: var(--color-backgrounddarker40);

    .color-input-container {
        flex: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 25rem;
        padding: 1rem;
        background-color: var(--color-surfacelighter);

        .header-container {
            flex: none;
            align-self: stretch;
            display: flex;
            flex-direction: row;
            align-items: flex-start;

            .title {
                flex: 1;
                margin-right: 1rem;
                font-size: 1.2rem;
                max-height: 2.4em;
            }

            .close-button-container {
                flex: none;
                width: 1.5rem;
                height: 1.5rem;
                padding: 0.25rem;

                &:hover, &:focus {
                    background-color: var(--color-surfacedark20);
                }

                &:focus {
                    outline-color: var(--color-surfacedarker);
                }

                .icon {
                    display: block;
                    width: 100%;
                    height: 100%;
                    fill: var(--color-surfacedarker);
                }
            }
        }

        .color-picker {
            flex: none;
            margin: 1rem;
        }

        .submit-button-container {
            flex: none;
            align-self: stretch;
            padding: 1rem;
            background-color: var(--color-signal5);

            &:hover, &:focus {
                filter: brightness(1.2);
            }

            &:focus {
                outline-color: var(--color-surfacedarker);
            }

            .label {
                max-height: 2.4em;
                text-align: center;
                color: var(--color-surfacelighter);
            }
        }
    }
}