/* variables specific to current element */

$spot-image-dimension-mobile: 96px;
$spot-image-dimension-desktop: 160px;

.#{$namespace}loanEmbed {

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

    $self: &;

    /* properties of current element  + media queries */


    /* 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 */

    // loanEmbed__item
    &__img {

        width: $spot-image-dimension-mobile;
        height: $spot-image-dimension-mobile;

        @include media-breakpoint-up(lg){

            width: $spot-image-dimension-desktop;
            height: $spot-image-dimension-desktop;

        }

    }

    &__headerSpot {

        @include spacer-component-stack("md");

        @include media-breakpoint-up(md){

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

            > * + * {

                margin-top: 0;

            }

        }

    }

    &__footer {

        display: flex;
        justify-content: flex-end;

    }

    &__collapseInner {

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

        @include media-breakpoint-up(lg) {

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

		}

    }
	
	&__recapIcon {

		width: map-deep-get($token-sizes-unit-map, "40");

		@include media-breakpoint-up(md) {

			width: map-deep-get($token-sizes-unit-map, "48");

		}

	}

	&__recapListItem {

		@include spacer-component-inline("md");
		display: flex;
		align-items: center;

	}


    /* modifiers */

    // loanEmbed -recap
    &.-recap {

        #{$self}__footer {

            display: block;
            @include spacer-component-stack("lg");
            text-align: center;

        }

    }

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

    /* Pseudo Classes */

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

        }
    }

    &:focus {
    }

    &:active {
    }

    &:focus,
    &:active {
    }

}