@import '../../../../styles/variables.less';

:host {
    position: relative;
    display: flex;
    flex-direction: row;
    padding: 8px;
    & ul.columns{
        position: relative;
        display: block;
        padding: 0;
        margin: 0;
        margin-right: 28px;
        list-style: none;
        & li.column{
            position: relative;
            display: block;
            padding: 4px 10px 0px 6px;
            margin: 0;
            list-style: none;
            width: 100%;
            white-space: nowrap;
            &:hover{
                background: var(--scheme-color-4);
            }
            &.selected {
                &::after{
                    position: absolute;
                    display: block;
                    content: '';
                    width: 2px;
                    left: -2px;
                    top: 0;
                    height: 100%;
                    background: var(--scheme-color-accent);
                }
            }

        }
    }
    & div.controls {
        position: relative;
        display: flex;
        flex-direction: column;
        & ul.colors{
            position: relative;
            display: block;
            padding: 0;
            margin: 0;
            list-style: none;
            width: 104px;
            white-space: normal;
            flex: auto;
            & li.color{
                position: relative;
                display: inline-block;
                height: 22px;
                width: 22px;
                margin: 0 4px 2px 0;
                padding: 0;
                list-style: none;
                line-height: 0;
                box-sizing: border-box;
                vertical-align: top;
                &:hover,
                &.selected {
                    border: 1px solid var(--scheme-color-0);
                    &::after{
                        position: absolute;
                        content: '';
                        top:0;
                        left:0;
                        width: 0;
                        height: 0;
                        border-top: 6px solid var(--scheme-color-0);
                        border-right: 6px solid transparent;
                    }
                    &:hover{
                        &::after{
                            display: none;
                        }
                    }
                }
            }
        }
        & div.buttons {
            text-align: right;
        }
    }

    & span.label {
        position: relative;
        display: inline-block;
        padding: 2px 0px 0px 4px;
        cursor: default;
        color: var(--scheme-color-1);
        vertical-align: top;
    }
}

