$eve-color-picker-size: 2rem;

.eve-color-picker {
    background: $eve-color-white;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1); // sass-lint:disable-line no-color-literals
    display: inline-block;

    > input {
        display: none;

        &:checked {
            ~ .eve-color-picker-control {
                label {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M7.41 18.59L8.83 20 12 16.83 15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10l4.59-4.59z'/%3E%3C/svg%3E"); // sass-lint:disable-line quotes
                }
            }

            ~ .eve-color-picker-palette {
                ul {
                    display: flex;
                }
            }
        }
    }

    .eve-color-picker-control {
        border-bottom: 1px solid $eve-color-dark-silver;
        display: flex;
        padding: $eve-spacing-8;

        label {
            align-items: center;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z'/%3E%3C/svg%3E"); // sass-lint:disable-line quotes
            background-position: center;
            background-repeat: no-repeat;
            background-size: $eve-color-picker-size / 2;
            border: 1px solid $eve-color-dark-silver;
            cursor: pointer;
            display: flex;
            flex-shrink: 0;
            height: 2.25rem;
            justify-content: center;
            margin-left: $eve-spacing-8;
            width: 2.25rem;
        }
    }

    .eve-color-picker-palette {
        display: flex;
        flex-direction: column;
        padding: $eve-spacing-4;

        ul {
            display: none;
            list-style: none;
            margin: 0;
            padding: 0;

            &:first-child {
                display: flex;
            }

            li {
                align-items: center;
                cursor: pointer;
                display: flex;
                height: $eve-color-picker-size;
                justify-content: center;
                margin: $eve-spacing-4;
                position: relative;
                width: $eve-color-picker-size;

                &:hover,
                &.is-selected {
                    border: .125rem solid $eve-color-white;
                    outline: .125rem solid $eve-color-black;
                }
            }
        }
    }
}