.a-gallery {
    margin: 0 auto;
}

.a-gallery__wrapper {
    max-width: $ARTICLE_TOTAL;
}

/**
 * Infinite scroll message
 */
.a-gallery__message {
    margin: 44px;
}

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

    &:hover,
    &:focus {
        @include button-single-light-hover;
    }
}

/**
 * Gallery navigation
 */
.g-image-nav {
    padding-right: 14px;
    width: 32px;
}

.g-image-nav__btns {
    margin: 0 auto;
    width: 32px;
}

.g-image-nav__btn {
    width: 32px;

    svg {
        fill: $stroller-grey;
        width: 16px;
    }
}

.g-image-nav__btn--previous {}
.g-image-nav__btn--next {
    border-top: 1px solid $ballet-grey;
}
.g-image-nav__btn[disabled] {
    svg {
        fill: $ballet-grey;
    }
}

/**
 * Image and thumbnail views
 */
.a-gallery__view {}

.a-gallery__image-list {}
.a-gallery__image-listitem {}

.a-gallery__thumbnail-list {
    margin-left: -1px;
    margin-right: -1px;

    @include at-x-large-size {
        margin-left: -12px;
        margin-right: -12px;
    }
}

.a-gallery__thumbnail {
    box-sizing: border-box;
    padding: 1px;

    @include at-x-large-size {
        padding: 12px;
    }
}

.a-gallery__thumbnail-image {}
.a-gallery__thumbnail-hover {
    background-color: rgba($black, 0.3);
    bottom: 1px;
    left: 1px;
    height: auto;
    right: 1px;
    top: 1px;
    width: auto;

    svg {
        fill: $white;
        width: 40px;
    }

    @include at-x-large-size {
        bottom: 12px;
        left: 12px;
        right: 12px;
        top: 12px;
    }
}


@include min-screen($ARTICLE_TOTAL) {

    .a-gallery__wrapper {
        padding-right: $ARTICLE_RIGHT_TOTAL;
    }

    .a-gallery__message {
        margin: 68px;
    }

}

@include at-medium-size {}

@include at-x-large-size {}