ArticleTemplates/assets/scss/themes/darkMode/_darkModeShared.scss

@import "colours";

@mixin darkModeShared($p-kicker, $p-inverted, $dark-1, $dark-2, $dark-3) {
    .figure--thumbnail .element-image-inner,
    .figure--thumbnail-with-caption .element-image-inner,
    .figure-wide .element-image-inner,
    .element__inner,
    .figure-wide .figure__inner {
        background-color: $blackTwo;
    }

    &.offline .element-audio,
    &.offline .element-embed,
    &.offline .element-map,
    &.offline .element-video {
        &::before {
            background-color: $blackTwo;
        }
    }

    .main-media--hidden-caption .main-media__caption__icon {
        background-color: rgba(255, 255, 255, .7);
    }

    .main-media--hidden-caption .main-media__caption__text {
        color: $warmGreyFour;
    }

    .keyline-4:before {
        background-image: repeating-linear-gradient($blackTwo, $blackTwo 1px, transparent 1px, transparent 3px);
    }

    .meta__published__comments {
        border-left: solid 1px $blackTwo;
    }

    #creative-container {
        background-color: $blackTwo;
        border-top: solid 1px $ratingYellow;
        color: $whiteTwo;

        mark {
            background: $ratingYellow;
            color: color(brightness-7);
        }

        .epic-button {
            background: $ratingYellow;
        }
    }

    .atom--snippet {
        background: $blackTwo;
        border-image: repeating-linear-gradient(to bottom, $warmGrey, $warmGrey 1px, transparent 1px, transparent 4px) 13;

        &__handle {
            background: $blackThree !important;
        }

        .atom--snippet__label {
            color: $p-inverted;
        }

        &--timeline .atom--snippet__event-date {
            background-color: $ratingYellow;
            color: $blackThree;
        }
    }

    .review-rating span {
        background-color: $ratingYellow;
    }

    .element-rich-link {
        border-top: solid 1px $blackTwo;
        border-bottom: solid 1px $blackTwo;

        a {
            color: $whiteTwo !important;
        }

        a::before {
            color: $warmGreyFour;
        }
    }

    .tags {
        .tags__list-item {
            a {
                color: $whiteTwo;
                background-color: $blackTwo;
            }

            &.more-button a {
                color: $whiteTwo;
                border: 1px solid $blackTwo;
            }
        }
    }

    .advert-slot--mpu {
        border-top: solid 1px $warmGrey;
        border-bottom: solid 1px $warmGrey;
        background: $blackTwo;
        color: $whiteTwo;

        .advert-slot__action {
            color: $whiteTwo !important;

            span[data-icon] {
                color: $whiteTwo !important;
            }
        }
    }

    @include mq($from: col4) {
        .article {
            background-color: $blackThree;
        }
    }

    &.garnett--type-analysis .headline {
        background-image: repeating-linear-gradient(to bottom, transparent, transparent calc(3.6rem - 1px), $whiteTwo);
    }

    .interactive,
    figure[data-atom-type="interactive"],
    figure[data-atom-type="chart"] {
        background-color: white;
    }

    .element-embed {
        background-color: white;
        @include mq($to: col2) {
            padding: 8px;
            margin-left: -12px;
            margin-right: -12px;
            width: calc(100% + 24px);
        }
    }

    figure[data-alt="The Fiver: sign up and get our daily football email."],
    figure[data-alt="Subscribe to the Guardian morning briefing"],
    figure[data-alt="Sign up to the daily Business Today email"] {
        background: none;
    }

    .player-card {
        background: $backgroundBlack;
        border-top: 2px solid $warmGreyFour;
    }

    .player-card__position {
        color: $warmGreyFour;
    }

    .player-card__stat-value {
        border-top: solid 1px $blackTwo;
    }

    .loading {
        &::before {
            color: $warmGreyFour;
        }
    }

    .prose a:not(.video-URL) {
        background-image: linear-gradient(rgba(220, 220, 220, 0.5) 0%, rgba(220, 220, 220, 0.5) 100%);
        color: $whiteTwo;
    }

    .sponsorship img {
        padding: 8px;
    }

    .prose blockquote,
    .prose blockquote.quoted {
        color: $whiteTwo;
        &::before {
            color: $warmGreyFour;
        }
    }

    .campaign--snippet {
        a {
            color: $blackThree !important;
        }
    }

    .campaign--snippet[open] {
        .heading,
        .t_and_c,
        a {
            color: $blackThree !important;
        }
    }

    .element.element-code pre {
        color: $whiteTwo;
    }

    figure[data-interactive="https://interactive.guim.co.uk/page-enhancers/nav/boot.js"] {
        background-color: $blackThree;
    }

    .listen-to-article__container {
        .audio-player__info__label,
        .audio-player__info__duration {
            color: #F6F6F6;
        }
        .audio-player__waveform {
            background-image: url('../img/audio-waveform-dark.svg');
        }
    }
}