@import '@financial-times/o3-foundation/css/core.css';
@import '@financial-times/o-grid/main';

.o-cookie-message--variant {
	width: auto;
	left: 0;
	right: 0;
	margin: 0;

	.o-cookie-message__outer {
		background: var(--o3-color-palette-ft-grey);
	}

	.o-cookie-message__inner {
		background: var(--o3-color-palette-ft-grey);
		box-shadow: none;
		padding: var(--o3-spacing-xs);
		max-width: 860px;

		@include oGridRespondTo('M') {
			max-width: 780px;
			padding: var(--o3-spacing-s) var(--o3-spacing-l) var(--o3-spacing-l);
		}

		@include oGridRespondTo('M') {
			max-width: 780px;
			padding: var(--o3-spacing-s) var(--o3-spacing-l) var(--o3-spacing-l);
		}

		@include oGridRespondTo('L') {
			max-width: 860px;
		}

		@include oGridRespondTo('XL') {
			max-width: 1020px;
		}

	}

	.o-cookie-message__content {
		color: var(--o3-color-palette-white);

		a {
			color: var(--o3-color-palette-sky);
		}

		@include oGridRespondTo('L') {
			max-width: 540px;
		}

		@include oGridRespondTo('XL') {
			max-width: 700px;
		}
	}

	.o-cookie-message__actions {
		flex-direction: column-reverse;

		.o-cookie-message__action--secondary a {
			color: var(--o3-color-palette-sky);
		}

		@include oGridRespondTo('M') {
			flex-direction: row;
		}

		@include oGridRespondTo('L') {
			max-width: 540px;
		}

		@include oGridRespondTo('XL') {
			max-width: 700px;
		}
	}
}