.ts-carousel
{
    box-sizing: content-box;
    overflow: hidden;
    position: relative;

    .ts-control, .ts-toggle
    {
        cursor: pointer;
        position: absolute;
        z-index: 5;
    }

    .ts-prev.ts-left
    {
        left: 10%;
        top: 50%;
        transform: translateY(-50%);
    }

    .ts-prev.ts-top
    {
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
    }

    .ts-next.ts-right
    {
        right: 10%;
        top: 50%;
        transform: translateY(-50%);
    }

    .ts-next.ts-bottom
    {
        bottom: 10%;
        left: 50%;
        transform: translateX(-50%);
    }

    &.ts-selector-horizontal .ts-toggle
    {
        left: 50%;
        transform: translateX(-50%);
    }

    &.ts-selector-vertical .ts-toggle
    {
        top: 50%;
        transform: translateY(-50%);
    }

    &.hide-icons
    {
        .ts-prev, .ts-next, .ts-toggle
        {
            display: none;
        }
    }

    &.hide-icons:hover
    {
        .ts-prev, .ts-next, .ts-toggle
        {
            display: block;
        }
    }

    .ts-viewer
    {
        box-sizing: content-box;
        position: relative;

        .ts-view
        {
            box-sizing: content-box;
            overflow: hidden;
            position: absolute;
            z-index: 1;

            .ts-slides
            {
                border-width: 0;
                box-sizing: content-box;
                margin: 0;
                padding: 0;
                position: relative;

                .ts-slide
                {
                    box-sizing: content-box;
                    overflow: auto;
                    position: absolute;
                    visibility: hidden;
                }

                .ts-slide-content
                {
                    border-width: 0px;
                    height: 100%;
                    margin: 0px;
                    padding: 0px;
                    position: relative;
                }
            }
        }
    }

    .ts-selector
    {
        box-sizing: content-box;
        position: absolute;
        z-index: 1;

        .ts-select
        {
            box-sizing: content-box;
            overflow: hidden;
            position: absolute;
            z-index: 2;

            .ts-thumbs
            {
                border-width: 0;
                box-sizing: content-box;
                margin: 0 auto;
                padding: 0;
                position: relative;
                z-index: 2;

                .ts-thumb
                {
                    box-sizing: content-box;
                    float: left;
                    cursor: pointer;
                    position: relative;
                    text-align: center;
                    z-index: 1;
                }

                .ts-thumb-overlay
                {
                    box-sizing: content-box;
                    pointer-events: none;
                    position: absolute;
                    overflow: hidden;
                }

                .ts-thumb-content
                {
                    border-width: 0px;
                    height: 100%;
                    margin: 0px;
                    padding: 0px;
                    position: relative;
                    z-index: -1;
                }

                .ts-focus
                {
                    padding: 0;
                    position: absolute;
                    z-index: -1;
                }
            }
        }
    }
}