@import 'structure.less';

@arrow-base: 16px;
@arrow-side: 8px;
@arrow-zero: 0px;
@color: rgba(0,0,0,0.5);


.deficon
{
    border-color: transparent;
    border-style: solid;
    border-width: @arrow-side;
    font-size: 0px !important;
    height: 0px !important;
    line-height: 0px !important;
    margin: 0px !important;
    padding: 0px !important;
    width: 0px !important;
}

.ts-left .deficon
{
    border-right-color: @color;
    border-right-width: @arrow-base;
    border-left-width: @arrow-zero;
}

.ts-right .deficon
{
    border-left-color: @color;
    border-left-width: @arrow-base;
    border-right-width: @arrow-zero;
}

.ts-top .deficon
{
    border-bottom-color: @color;
    border-bottom-width: @arrow-base;
    border-top-width: @arrow-zero;
}

.ts-bottom .deficon
{
    border-top-color: @color;
    border-top-width: @arrow-base;
    border-bottom-width: @arrow-zero;
}

.ts-toggle
{
    background-color: @color;

    .ts-selector-horizontal &
    {
        height: 8px;
        width: 48px;
    }

    .ts-selector-vertical &
    {
        height: 48px;
        width: 8px;
    }
}