@import "@cnbritain/merlin-www-common:bystander";

@import "@cnbritain/merlin-www-bbcode:bystander";
@import "@cnbritain/merlin-www-buttons:bystander";
@import "@cnbritain/merlin-www-figure:bystander";
@import "@cnbritain/merlin-www-image:bystander";
@import "@cnbritain/merlin-www-marketing-cards:bystander";
@import "@cnbritain/merlin-www-topic-strip:bystander";

@import "../wireframe/_author";
@import "../wireframe/_body";
@import "../wireframe/_footer";
@import "../wireframe/_gallery";
@import "../wireframe/_share";
@import "../wireframe/_sidebar";
@import "../wireframe/_video";
@import "../wireframe/_disclaimer";

@import "../tatler/_tatler_base";

.a-header {
    margin-top: 0;
    padding-top: 32px;

    @include at-x-large-size {
        margin-top: 0;
        padding-top: 48px;
    }
}

.a-header__content {
    background-color: transparent;
}

.ad--article-gallery,
.ad--article-gallery .da__container {
    background-color: $cod-gray;
    border-color: $mine-shaft;
}

.a-header__tag__secondary {
    border-right: 1px solid $mine-shaft;
}

.a-main--gallery {
    background-color: $cod-gray;
    color: $white;

    .a-header__tag a + a {
        border-left-color: $mine-shaft;
    }

    // Header
    .a-header__title,
    .a-header__teaser,
    .a-header__image-title,
    .a-header__image-caption {
        color: $white;
    }
    // Body
    .a-body__content {
        color: $white;
    }
    // Gallery
    .c-figure__title {
        color: $white;
    }
    // Share
    .a-share__title {
        color: $white;
    }
}

.a-infinite {
    background: $cod-gray;
}

.a-gallery__message-btn {
    @include button-single;
    @include button-single-dark;

    &:hover {
        @include button-single-dark-hover;
    }
}

//Dark version of gallery navigation buttons
.g-image-nav__btn {
    background-color: $mine-shaft;

    &:hover {
        background-color: $wild-sand;

        svg {
            fill: $mine-shaft;
        }
    }

    svg {
        fill: $white;
    }
}

.g-image-nav__btn[disabled] {
    background-color: $black;
    border: 1px solid $mine-shaft;

    svg {
        fill: $mine-shaft;
    }
}