$theme-name: 'default'; /*TODO how to get this from the touch variables?*/

$legend-border-color: #ccc !default;
$legend-border: 1px solid $legend-border-color !default;
$legend-background-color: #fff !default;
$legend-z-index: 10 !default;
$legend-item-border: 1px solid rgba($legend-border-color, .5) !default;
$legend-item-background: rgba(#fff, 0) !default;

$marker-size: .8em !default;

@mixin touch-charts-legend {

    .x-legend {
        z-index: $legend-z-index;
        border: $legend-border;
        background: $legend-background-color;
        overflow: hidden;
        position: absolute;
        @include border-radius(5px);
        @if (lightness($legend-background-color) > 30) {
            @include box-shadow(rgba(#fff, .6) 0 1px 1px);
        } @else {
            @include box-shadow(rgba(#fff, .2) 0 1px 0);
        }
        
        .x-legend-item {
            padding: .8em 1em .8em $marker-size + 1em;
            @include readable-color($base-color, 50);
            background: $legend-item-background;
            max-width: 20em;
            min-width: 8em;
            font-size: 14px;
            line-height: 14px;
            font-weight: bold;
            position: relative;

            .x-legend-item-marker {
                width: $marker-size;
                height: $marker-size;
                @include border-radius($marker-size/2);
                @include box-shadow(rgba(#fff, .3) 0 1px 0, rgba(#000, .4) 0 1px 0 inset);
                position: absolute;
                left: .7em;
                top: 1em;
            }

            &:last-child {
                border: 0;
            }

            &.x-dragging {
                @include box-shadow(darken($legend-background-color, 50) 0 0 .5em);
            }

            &.x-drop-hover {
                @include box-shadow(rgba(0, 0, 200, 0.9), 0, 0, .3em, 0, true);
            }
        }

        .x-legend-inactive {
            @include opacity(.3);
        }

        &.x-legend-horizontal {
            .x-legend-inner > * {
                display: -webkit-box;
                @include box-orient(horizontal);
                padding: 0 .4em;
            }

            .x-legend-item {
                border: 0;
                border-right: $legend-item-border;
                white-space: nowrap;
                max-width: none;
                min-width: 0;
                
                &:last-child {
                    border: 0;
                }
            }
        }
    }

    .x-legend-button-icon {
        -webkit-mask-image: theme-image($theme-name, 'pictos/list.png');

    }

}
