@import "../../../styles/modules/importAll";

.ColorLabels {

    list-style: none;

    li {
        margin: 1rem 0;
        height: 2rem;
    }

    .ColorLabelItem {
        display: flex;
        flex: 1;
        align-items: center;
        position: relative;

        .colorIndicator {
            display: inline-block;
            width: 2rem;
            height: 2rem;
            margin-right: 0.75rem;

            @include border-radius(3px);

            position: relative;

            .arrowOverlay {
                display: block;
                position: absolute;
                height: 0.5rem;
                width: 0.5rem;
                right: 0.3rem;
                bottom: 0.3rem;

                /* Draw a triangle */
                border-top: 0.4rem solid white;
                border-right: 0.4rem solid transparent;
                border-left: 0.4rem solid transparent;
            }
        }

        .colorPickerContainer {
            position: absolute;
            left: -0.15rem;
            top: 2rem;
            z-index: 2;
        }
    }
}