/* variables specific to current element */

$image-width: map-deep-get($token-sizes-unit-map, "96");
$image-width-large: map-deep-get($token-sizes-unit-map, "8")*18;

.#{$namespace}banner {

    /* Save root element context for easy access if nesting is needed */

    $self: &;


    /* properties of current element  + media queries */
    display: flex;
    align-items: center;
    gap: map-deep-get($token-spacer-inline-map, "md");
    padding: map-deep-get($token-spacer-inset-map, "md");
    border-radius: map-deep-get($token-radius-map, "16");
	@include custom-prop-fallback("background-color", "sys-color-elevation-surface-flat");


	/* Pseudo Elements */

    &::before {
    }

    &::after {
    }

    /*
    Include elements that are linked to the current element but have to reside at the root level of the stylesheet
    (e.g: keyframes)
    */
    @at-root {
    }


    /* children - write selector in full in comments in order to facilitate search */

    // banner__img
    &__img {

        width: $image-width;

    }

	// banner__content
    &__content {

        flex-grow: 1;
        @include spacer-component-stack("xs");

    }

    /* modifiers */

    // banner -btn
    &.-btn {
        &:hover {
            @media (hover: hover) {

				@include custom-prop-fallback("background-color", "sys-color-elevation-surface-flat");

            }
        }
    }

    &.-background {


		@include gradient-x-three-colors(map-deep-get($token-color-brand-map, "highlight", "140"), map-deep-get($token-color-brand-map, "highlight", "100"), map-deep-get($token-color-brand-map, "highlight", "60"), 30%, 82%, 100%, 45deg);
		@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");

		#{$self}__title {

			color: inherit;

        }

        #{$self}__content {

            > * + * {

                margin-top: 0 !important;

            }

        }

    }

	&.-pageCover {

		display: block;

		#{$self}__content {

			padding: map-deep-get($token-spacer-inset-map, "lg");

			@include media-breakpoint-up("lg") {

				padding: map-deep-get($token-spacer-inset-map, "xl");

			}

		}
		
	}

	&.-insetLg {

		padding: map-deep-get($token-spacer-inset-map, "lg");

	}

	&.-sizeLg {

		gap: map-deep-get($token-spacer-inline-map, "xl");

		#{$self}__img {

			width: $image-width-large;

		}

	}

    &.-mobileCard {

		@include spacer-component-stack("md");
        flex-direction: column;
        align-items: flex-start;

        > * {

            margin-right: 0;

        }

        @include media-breakpoint-up(md){

            flex-direction: row;
            align-items: center;
            @include spacer-component-inline("xl");

            > * + * {

                margin-top: 0 !important;

            }


        }

        #{$self}__img {

            width: 100%;

            @include media-breakpoint-up(md) {

                max-width: $image-width-large;

            }

        }

    }

    /* random parent element */
    /*
    *
    *   Syntax : .randomParentElt & {}
    *
    */

    /* Pseudo Classes */

    &:hover {
        @media (hover: hover) {

        }
    }

    &:focus {
    }

    &:active {
    }

    &:focus,
    &:active {
    }

}