@import './variables';
@import './mixins';
@import './grid';
@import './elements';
@import './layout';
@import './themes/branded';
@import './themes/full-bleed-offset';
@import './themes/split-text';
@import './themes/full-bleed-image';
@import './themes/package';
@import './themes/right-rail';
@import './themes/centered';
@import './themes/deep-portrait';
@import './themes/deep-landscape';
@import './colors/colors';

@mixin oTopper(
	$opts: (
		'themes': $_o-topper-themes,
		'elements': $_o-topper-elements,
		'colors': $_o-topper-colors,
	),
	$include-base-styles: true
) {
	// Get topper themes to include.
	$themes: map-get($opts, 'themes');
	$themes: if($themes, $themes, ());
	// Get topper elements to include.
	$elements: map-get($opts, 'elements');
	$elements: if($elements, $elements, ());
	// Get topper colors to include.
	$colors: map-get($opts, 'colors');
	$colors: if($colors, $colors, ());

	// Output base styles required by all themes.
	@if $include-base-styles {
		.o-topper {
			@include _oTopperBase;
            .n-content-image {
                margin: var(--o3-spacing-xs) 0 0;
            }
		}
	}

	// Output chosen elements, colours, and themes.
	@include _oTopperElements($elements);
	@include _oTopperThemes($themes, $colors);
}

@if ($o-topper-is-silent == false) {
	@include oTopper();
	$o-topper-is-silent: true !global;
}

/* Full-grid and in-line are not part of distributable Origami toppers, but only used via cp-pipeline-ui */
.o-topper--full-grid,
.o-topper--in-line {
    @include oGridContainer();
    // Do not use the grid to set top padding. Works only on Desktop
    grid-template-rows: none;
    padding-left: 0;
    padding-right: 0;

    .o-topper__content {
        // Set top padding for all resolutions
        padding-top: 20px;
    }

    @include oGridRespondTo($until: M) {
        .o-topper__content {
            padding-left: 10px;
            padding-right: 10px;
        }
    }
	
    @include oGridRespondTo($from: M, $until: L) {
        // Emulating article
        margin: 0 auto;
        // Matching alignment in article added by multiple elements
        padding-left: 26px;
        padding-right: 26px;
    }

    @include oGridRespondTo($from: XL) {
        max-width: oGridGetMaxWidthForLayout(XL);
        padding-left: 20px;
        padding-right: 20px;
    }
}

.o-topper--full-grid {
    .o-topper__content {
        // Drill down the grid to the summary
        grid: inherit;
        // All the element aligned with the beginning of the grid
        grid-column-start: 1;
        grid-column-end: inherit;
        .o-topper__summary {
            margin-top: 20px;
            display: grid;
            grid: inherit;
            // Summary elements start at column 3
            & > * {
                grid-column-start: 3;
            }
        }
    }
}

.headline__premium-badge {
	vertical-align: middle;
}