@green1: #0F0;
@green2: #CFC;
@green3: #060;

.ts-theme-@{theme}
{
    box-sizing: content-box;

    .ts-carousel
    {
        border-radius: 10px;
        box-shadow: 0 0 4px 3px #000;
        padding: 10px;
    }

    .ts-selector-horizontal
    {
        background: linear-gradient(90deg, @green1, @green2, @green1, @green2, @green1);

        .ts-toggle
        {
            width: 50%;
        }
    }

    .ts-selector-vertical
    {
        background: linear-gradient(0deg, @green1, @green2, @green1, @green2, @green1);

        .ts-toggle
        {
            height: 50%;
        }
    }

    .ts-control i
    {
        color: @green2;
        font-size: 36px;
        text-shadow: 0px 0px 4px @green3;
    }

    .ts-toggle
    {
        background-color: @green2;
        border-radius: 8px;
        box-shadow: 0px 0px 4px 0px @green3;
    }

    .ts-viewer
    {
        background-color: rgba(255,255,255,0.6);
        border-radius: 8px;
        box-shadow: 0 0 3px 2px #000;
        margin: 6px;
    }

    .ts-slide
    {
        border-radius: 8px;
    }

    .ts-slide-content
    {
        border-radius: 8px;
        padding: 8px;
    }

    .ts-selector
    {
        margin: 12px;
    }

    .ts-selector-visible .ts-selector
    {
        background-color: fade(@green3, 50%);
        border-radius: 8px;
        box-shadow: 0 0 3px 2px #000;
        margin: 6px;
    }

    .ts-thumb
    {
        background-color: @green1;
        border: 1px solid #000;
        border-radius: 8px;
        box-shadow: 0 0 2px 1px #000 inset;
        margin: 6px;
        padding: 4px;
    }

    .ts-thumb-overlay
    {
        border-radius: 8px;
    }

    .ts-thumb.active
    {
        background-color: @green2;
    }
}