/*=============================================================================
  IMAGE ROTATOR (CAROUSEL) BLOCK

  * Shows images in a rotating carousel (or a single image if only one slide)
  * Appears on home page, cat page, and portals
  * Shares some of the same classes as image blocks, particularly the overlays
=============================================================================*/

.rotator-block.single-slide {
    padding-bottom: var(--spacing-10);
}

.image-rotator__image-wrapper {
    color: var(--color-text-primary-dark);
}

.image-rotator__image-wrapper:visited,
.image-rotator__image-wrapper:focus,
.image-rotator__image-wrapper:hover {
    color: var(--color-text-primary-dark);
}

.image-rotator__image-wrapper:focus,
.image-rotator__image-wrapper:hover {
    text-decoration: underline;
}

.image-rotator__navigation-tabs {
    margin: 0 auto;
    padding-bottom: var(--spacing-06);
    display: flex;
    max-width: 1200px;
}

.image-rotator__navigation-tab-title {
    padding: var(--spacing-04);
    font: var(--text-body-sm-compact);
    color: var(--color-text-primary-dark);
    background-color: var(--color-surface-primary);
    text-align: center;
}

.image-rotator__navigation-tab-title h3 {
    margin: 0;
}

.image-rotator__image-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto var(--spacing-06);
    background: var(--color-surface-primary);
    border-radius: var(--border-radius-md);
}

.rotator-block.single-slide .image-rotator__image-container {
    margin: 0;
}

.image-rotator__image {
    display: block;
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0;
}

.rotator-block.single-slide .image-rotator__image {
    border-radius: var(--border-radius-md);
}

.image-rotator__image-container.has-overlay::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at 0 100%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 70%);
    z-index: 5;
}

.image-rotator__logo-container {
    position: absolute;
    top: var(--spacing-02);
    right: var(--spacing-02);
    height: var(--spacing-12);
    width: var(--spacing-12);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    background-color: var(--color-surface-primary);
}

.image-rotator__logo-container.is-black {
    background-color: var(--color-surface-primary-inverse);
}

.image-rotator__logo-container.is-left {
    left: var(--spacing-04);
    right: auto;
}

.image-rotator__logo {
    position: absolute;
    width: var(--spacing-12);
    top: var(--spacing-12-negative);
    left: 0;
}

.image-rotator__logo-container.is-color .image-rotator__logo {
    top: 0;
}

.image-rotator__logo-container.is-black .image-rotator__logo {
    top: -144px;
}

.ta1 .image-rotator__logo-container,
.ta2 .image-rotator__logo-container,
.ta3 .image-rotator__logo-container,
.ta4 .image-rotator__logo-container,
.ta5 .image-rotator__logo-container,
.ta6 .image-rotator__logo-container {
    top: var(--spacing-04);
    right: var(--spacing-04);
}

.front_page>*:first-child .image-block,
.front_page>*:first-child .image-rotator__image-container {
    margin-top: 0;
    padding-top: 0;
}

.rotator-block .image-block__topline {
    font: var(--text-marketing-content-sm);
    padding-bottom: var(--spacing-02);
}

.rotator-block .image-block__headline {
    font: var(--text-marketing-headline-xs);
    padding-bottom: var(--spacing-02);
}

.rotator-block .image-block__subline {
    font: var(--text-marketing-content-sm);
    padding-bottom: var(--spacing-02);
}

.rotator-block .image-block__disclaimer {
    font: var(--text-marketing-content-disclaimer);
    padding-bottom: var(--spacing-04);
}

@media screen and (min-width: 576px) {

    .ta3 .image-rotator__logo-container,
    .ta4 .image-rotator__logo-container,
    .ta5 .image-rotator__logo-container {
        top: var(--spacing-04);
        left: var(--spacing-04);
    }

    .image-rotator__image-container.is-holiday {
        width: 100%;
        max-width: 767px;
    }

    .image-rotator__image-container.is-holiday .image-rotator__image {
        width: 767px;
        max-width: 767px;
    }

    .rotator-block .image-block__topline {
        font: var(--text-marketing-content-md);
    }

    .rotator-block .image-block__headline {
        font: var(--text-marketing-headline-md);
    }

    .rotator-block .image-block__subline {
        font: var(--text-marketing-content-md);
    }
}

@media screen and (min-width: 768px) {

    .image-rotator__image-container {
        height: auto;
        margin: 0 auto;
        border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    }

    .image-rotator .image-rotator__logo-container.is-left {
        left: var(--spacing-04);
        right: auto;
    }

    .header-banner:not(.is-static) .image-rotator__logo-container,
    .image-rotator__image-container .image-rotator__logo-container {
        top: var(--spacing-04);
        right: var(--spacing-04);
        height: var(--spacing-16);
        width: var(--spacing-16);
    }

    .header-banner:not(.is-static) .image-rotator__logo,
    .image-rotator__image-container .image-rotator__logo {
        width: var(--spacing-16);
        top: var(--spacing-16-negative);
    }

    .header-banner:not(.is-static) .image-rotator__logo-container.is-black .image-rotator__logo,
    .image-rotator__image-container .image-rotator__logo-container.is-black .image-rotator__logo {
        top: -192px;
    }

    .image-rotator__logo-container.is-color .image-rotator__logo {
        top: 0;
    }

    .image-rotator__image-container.is-holiday {
        width: auto;
        max-width: 1200px;
    }

    .front_page .image-rotator__image-container:first-of-type {
        margin: 0 auto;
    }

    .image-rotator__image {
        width: 100%;
        max-width: 1200px;
        top: auto;
        left: auto;
        transform: none;
    }

    .image-rotator__image-container.is-holiday .image-rotator__image {
        width: 100%;
        max-width: 1200px;
    }

    .image-rotator .ta1 .image-block__info-wrap {
        left: 55%;
    }

    .image-rotator .ta2 .image-block__info-wrap {
        left: 55%;
        top: 50%;
        transform: translateY(-50%);
    }

    .image-rotator .ta3 .image-block__info-wrap {
        max-width: 45%;
    }

    .image-rotator .ta4 .image-block__info-wrap {
        top: 50%;
        transform: translateY(-50%);
        max-width: 45%;
    }

    .image-rotator .ta5 .image-block__info-wrap {
        left: auto;
        right: 50%;
        top: 50%;
        width: 60%;
        max-width: 60%;
        transform: translate(50%, -50%);
        text-align: center;
        margin-left: 0;
        margin-right: 0;
        padding-right: 0;
    }

    .rotator-block .image-block__topline {
        font: var(--text-marketing-content-lg);
    }

    .rotator-block .image-block__headline {
        padding-bottom: var(--spacing-02);
    }

    .rotator-block .image-block__subline {
        font: var(--text-marketing-content-lg);
    }

    .image-rotator__navigation-tab-title {
        flex: 1;
        border-top: none;
        border-right: var(--border-weight-01) solid var(--color-border-primary);
        border-bottom: var(--border-weight-01) solid var(--color-border-primary);
        border-left: var(--border-weight-01) solid var(--color-border-primary);
        padding-bottom: calc(16px + 1px);
    }

    #image-rotator__navigation-control {
        border-top: none;
        background-color: var(--color-surface-primary);
    }

    .image-rotator__navigation-tabs>*:not(:first-child) {
        border-left: none;
    }

    .image-rotator__navigation-tabs>.is-active {
        padding-bottom: var(--spacing-04);
        border-bottom: var(--border-weight-02) solid var(--color-brand-primary-01);
    }

    .image-rotator__navigation-tabs #image-rotator__navigation-control {
        width: 52px;
        max-width: 52px;
        position: relative;
        padding: 0;
    }

    .image-rotator__navigation-tabs #image-rotator__navigation-control>span {
        display: block;
        position: absolute;
        content: '';
        height: var(--icon-size-lg);
        width: var(--icon-size-lg);
        background-size: var(--icon-size-lg);
        background-position: var(--icon-position-lg-black);
        top: 50%;
        left: 50%;
        transform: translate(-45%, -45%);
        padding: 0;
        margin-right: 0;
    }

    .image-rotator__navigation-tabs #image-rotator__navigation-control.play>span {
        background: url('https://img.tacklewarehouse.com/graphics-resizer/icons/ui-pause.svg') no-repeat;
    }

    .image-rotator__navigation-tabs #image-rotator__navigation-control.pause>span {
        background: url('https://img.tacklewarehouse.com/graphics-resizer/icons/ui-play.svg') no-repeat;
    }

    .front_page section.rotator-block.single-slide {
        padding-bottom: var(--spacing-10);
    }

    .front_page .image-rotator__image-wrapper:first-child .image-rotator__image-container,
    .image-rotator__image-wrapper:last-child .image-rotator__image-container {
        margin: 0 auto;
    }
}

@media screen and (min-width: 992px) {

    .image-rotator__logo-container.is-color .image-rotator__logo {
        top: 0;
    }

    .ta3 .image-rotator__logo-container,
    .ta5 .image-rotator__logo-container {
        top: var(--spacing-04);
        left: var(--spacing-04);
    }

    .image-rotator .ta1 .image-block__info-wrap {
        bottom: var(--spacing-10);
    }

    .image-rotator .ta3 .image-block__info-wrap {
        left: var(--spacing-10);
        bottom: var(--spacing-10);
    }

    .image-rotator .ta4 .image-block__info-wrap {
        left: var(--spacing-10);
    }

    .image-rotator .ta6 .image-block__info-wrap {
        left: auto;
        right: 50%;
    }

    .rotator-block .image-block__headline {
        font: var(--text-marketing-headline-lg);
    }
}

@media screen and (min-width: 1200px) {

    .header-banner:not(.is-static) .image-rotator__logo-container.is-left {
        left: var(--spacing-04);
    }

    .header-banner:not(.is-static) .image-rotator__logo-container,
    .image-rotator__image-container .image-rotator__logo-container {
        height: 80px;
        width: 80px;
    }

    .header-banner:not(.is-static) .image-rotator__logo,
    .image-rotator__image-container .image-rotator__logo {
        width: 80px;
        top: -80px;
    }

    .header-banner:not(.is-static) .image-rotator__logo-container.is-black .image-rotator__logo,
    .image-rotator__image-container .image-rotator__logo-container.is-black .image-rotator__logo {
        top: -240px;
    }

    .image-rotator__logo-container.is-color .image-rotator__logo {
        top: 0;
    }

    .image-rotator .carousel-inner {
        border-top-left-radius: var(--border-radius-md);
        border-top-right-radius: var(--border-radius-md);
    }

    .image-rotator__image {
        border-top-left-radius: var(--border-radius-md);
        border-top-right-radius: var(--border-radius-md);
    }

    .image-rotator.one-slide .image-rotator__image {
        border-bottom-left-radius: var(--border-radius-md);
        border-bottom-right-radius: var(--border-radius-md);
    }

    .rotator-block .image-block__topline {
        font: var(--text-marketing-content-xl);
    }

    .rotator-block .image-block__headline {
        font: var(--text-marketing-headline-xl);
    }
}

@media screen and (min-width: 1448px) {

    .image-rotator__logo-container.is-color .image-rotator__logo {
        top: 0;
    }

    .rotator-block .image-block__headline {
        font: var(--text-marketing-headline-xxl);
    }
}
