@import "variables";

@mixin lineSelected {
    background-color: $primary-color-light;
}

[data-focus='list-component'] {
    padding: 0;
    margin: 0;
    [data-focus="line-component"] {
        background-color: #FFF;
        margin: 8px 0;
        padding:5px 10px;
        position: relative;
        display: flex;
        align-content: stretch;
        [data-focus="line-component-data"] {
            flex-grow: 1;
        }
        [data-focus="line-component-selection"] {
            padding: 10px 15px;
            flex-grow: 0;
        }
        [data-focus="line-component-actions"] {
            background-color: #FFF;
            display: none;
            position: absolute;
            right:0;
            padding:10px 20px;
            button {
                margin: 0 5px;
                cursor: pointer;
            }
        }
        &:hover {
            [data-focus="line-component-actions"] {
                display: block;
            }
        }
        &[data-selected="true"] {
            @include lineSelected;
            [data-focus="line-component-actions"] {
                @include lineSelected;
            }
        }
    }
}