
@colorOne: rgb(255, 204, 255);
@colorTwo: rgb(0, 0, 0);

.ts-theme-@{theme}
{
    background-color: #555;
    color: white;

    .ts-control i
    {
        color: @colorOne;
        font-size: 38px;
        opacity: 0.75;
        text-shadow: 1px 1px 3px @colorTwo;
    }

    .ts-toggle
    {
        background-color: @colorOne;
        border-radius: 50%;
        box-shadow: 1px 1px 3px 0px @colorTwo;
        height: 24px;
        opacity: 0.75;
        width: 24px;
    }

    .ts-control:hover i, .ts-toggle:hover
    {
        opacity: 1;
    }

    .ts-viewer, .ts-selector, .ts-slide
    {
        background-color: transparent;
    }

    .ts-prev, .ts-next
    {
        padding: 6px;
    }

    .ts-selector
    {
        background-color: fade(@colorTwo, 25%);
    }

    .ts-selector-top .ts-selector
    {
        border-bottom: 4px solid @colorOne;
    }

    .ts-selector-left .ts-selector
    {
        border-right: 4px solid @colorOne;
    }

    .ts-selector-bottom .ts-selector
    {
        border-top: 4px solid @colorOne;
    }

    .ts-selector-right .ts-selector
    {
        border-left: 4px solid @colorOne;
    }

    .ts-carousel.ts-selector-transient .ts-selector,
    .ts-carousel.ts-selector-overlay .ts-selector
    {
        border: none;
    }

    .ts-select
    {
        margin: 8px;
    }

    .ts-selector-horizontal.ts-selector-transient .ts-select,
    .ts-selector-horizontal.ts-selector-overlay .ts-select
    {
        margin: 8px 50px;
    }

    .ts-selector-vertical.ts-selector-transient .ts-select,
    .ts-selector-vertical.ts-selector-overlay .ts-select
    {
        margin: 50px 8px;
    }

    .ts-thumb
    {
        border: 4px solid rgba(96, 96, 96, 0.5);
        border-radius: 50%;
        box-shadow: 0 0 2px 1px @colorTwo;
        margin: 14px;
        overflow: hidden;
    }

    .ts-thumb-overlay
    {
        background-color: fade(@colorTwo, 25%);
        border-radius: 50%;
        box-shadow: 0 0 2px 1px @colorTwo inset;
    }

    .ts-thumb.active, .ts-thumb.active:hover
    {
        border-color: @colorOne;
    }

    .ts-thumb:hover
    {
        border-color: silver;
    }

    .ts-thumb.active .ts-thumb-overlay,
    .ts-thumb:hover .ts-thumb-overlay
    {
        background-color: transparent;
    }

    .ts-focus
    {
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        display: none;
        box-shadow: 0 0 2px 1px @colorTwo;
    }
}
