$spot-select-padding-x: map-deep-get($token-spacer-inset-map, "md");
$spot-select-padding-y: map-deep-get($token-spacer-inset-map, "sm");
$spot-select-border-radius: map-deep-get($token-radius-map, "16");
$spot-select-padding-left: ($checkbox-dot-dimensions-global + ($spot-select-padding-x*2));
$spot-select-hidden-content-negative-offset: -$spot-select-padding-left + $spot-select-padding-x;

.#{$namespace}spotSelect {

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

	$self: &;


	/* variables specific to current element */


	/* properties of current element  + media queries */

	position: relative;

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

	IMG {

		display: none;

		@include media-breakpoint-up(sm){

			display: block;

		}


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

		@include media-breakpoint-up(lg) {

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

		}

		object-fit: cover;

	}

	// spotSelect__body
	&__body {

		display: flex;
		flex-direction: column;
		justify-content: space-between;
		border: $border-width*2 solid;
		@include custom-prop-fallback("background-color","sys-color-elevation-surface-flat");
		@include custom-prop-fallback("border-color","sys-color-border-primary-moderate");
		// same as body color
		@include custom-prop-fallback("color","sys-color-text-primary-contrast");
		padding: $spot-select-padding-y $spot-select-padding-x $spot-select-padding-y $spot-select-padding-left;
		border-radius: map-deep-get($token-radius-map, "16");
		min-height: map-deep-get($token-sizes-unit-map, "56");
		height: 100%; /* if spot selects are in stretch container */

	}

	&__content {

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

		@include media-breakpoint-up(lg) {
			align-items: center;
		}

	}

	&__checkItemLabel {

		&::after {

			content: "";
			position: absolute;
			z-index: z("zero");
			top: -$spot-select-padding-y;
			left: -$spot-select-padding-left;
			right: -$spot-select-padding-x;
			bottom: -$spot-select-padding-y;
			cursor: pointer;
			border-radius: $spot-select-border-radius;

		}

	}

	&__title {

		display: flex;
		align-items: center;
		@include spacer-component-inline("sm");
		padding-right: map-deep-get($token-spacer-inset-map, "xl");

		> * {

			font-family: map-deep-get($token-font-family-map, "text");
			font-weight: map-deep-get($token-font-weight-map, "semi-bold");
			color: inherit;

		}

		.#{$namespace}icon {

			display: inline-block;
			vertical-align: middle;

			&::before {

				font-size: 1.25em;

			}

		}

	}

	&__inner {

		flex-grow: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-top: $spot-select-padding-y;
		padding-bottom: $spot-select-padding-y;

	}

	&__hiddenContent,
	&__message {
		display: none;
		margin-left: $spot-select-hidden-content-negative-offset;
	}

	&__radioInput:checked ~ * &__message,
	&__radioInput:checked ~ * &__hiddenContent {
		display: block;
	}

	&__hiddenContentInner,
	&__messageInner {

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

	}

	&__radioInput,
	&__checkboxInput,
	&__checkItem {

		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: -(($checkbox-dot-dimensions-global + ($spot-select-padding-x)));


	}

	&__radioInput,
	&__checkboxInput {

		left: $spot-select-padding-x;

	}

	&__radioInput,
	&__checkboxInput {

		&:checked ~ #{$self}__body {

			position: relative;
			z-index: z("low");
			@include custom-prop-fallback("border-color", "comp-radio-checked-border-color")

		}

		&.-isDisabled,
		&[disabled] ~ #{$self}__body, &:disabled ~ #{$self}__body {

			pointer-events: none;
			@include custom-prop-fallback("border-color", "comp-checkbox-disabled-border-color");
			@include custom-prop-fallback("color", "comp-checkbox-disabled-border-color");

		}

		&.-isDisabled,
		&[disabled] ~ * #{$self}__img, &:disabled ~ * #{$self}__img,
		&[disabled] ~ * IMG, &:disabled ~ * IMG {

			filter: grayscale(1);

		}

		&.is-invalid ~ #{$self}__body {

			position: relative;
			z-index: z("low");
			@include custom-prop-fallback("background-color", "sys-color-background-status-danger-6");
			@include custom-prop-fallback("border-color", "sys-color-text-status-danger-vivid");
			@include custom-prop-fallback("color", "sys-color-text-status-danger-vivid");

		}

	}

	&__radioInput {

		&.-isDisabled,
		&[disabled] ~ * #{$self}__checkItem, &:disabled ~ * #{$self}__checkItem {

			@include radioInputDisabled();

		}

		&.-isDisabled:checked,
		&[disabled]:checked ~ * #{$self}__checkItem, &:disabled:checked ~ * #{$self}__checkItem {

			@include radioInputDisabledChecked();

		}

		&:checked ~ * #{$self}__checkItem,
		&.-active {

			@include radioInputChecked();

		}

	}

	&__checkboxInput {

		&.-isDisabled,
		&[disabled] ~ * #{$self}__checkItem, &:disabled ~ * #{$self}__checkItem {

			@include checkboxInputDisabled();

		}

		&:checked ~ * #{$self}__checkItem,
		&.-isActive {

			@include checkboxInputChecked();

		}

		&.-isDisabled:checked,
		&[disabled]:checked ~ * #{$self}__checkItem, &:disabled:checked ~ * #{$self}__checkItem {

			@include checkboxInputDisabledChecked();

		}

	}

	/* modifiers */

	// spotSelect -roundedImg

	&.-roundedImg {

		display: none;

		@include media-breakpoint-up(sm){

			display: block;

		}

		#{$self}__img {

			flex-shrink: 0;
			width: map-deep-get($token-sizes-unit-map, "40");
			height: map-deep-get($token-sizes-unit-map, "40");
			border-radius: map-deep-get($token-radius-map, "circle");

			@include media-breakpoint-up(lg) {

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

			}

		}

	}

	/* @TODO Deprecated remove when safe to do so */
	&.-centered {
		
		#{$self}__radioInput,
		#{$self}__checkItem {

			top: $spot-select-padding-y * 2;
			right: $spot-select-padding-x;
			left: auto;
			margin-right: 0 !important;
			transform: none;

		}

		#{$self}__checkItemLabel {
			
			&::after {

				top: 0;
				right: 0;
				bottom: 0;
				left: 0;

			}
			
		}

		#{$self}__body {

			padding: $spot-select-padding-y $spot-select-padding-x !important;
			position: relative;

		}

		#{$self}__content {

			display: flex;
			justify-content: center;
			align-items: center;
			@include spacer-component-inline("sm");
			position: static;

			@include media-breakpoint-up(lg) {

				@include spacer-component-stack("md");
				flex-direction: column;
				padding-top: map-deep-get($token-spacer-unit-map, "24");

			}

			IMG {

				@include media-breakpoint-up(lg) {

					margin-right: 0;
					margin-top: 0;
					width: map-deep-get($token-sizes-unit-map, "80");
					height: map-deep-get($token-sizes-unit-map, "80");

				}

			}

		}

	}

	&.-noPic {

		#{$self}__content {

			align-items: flex-start;

		}

	}

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

	/* Pseudo Classes */

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

			#{$self}__checkboxInput,
			#{$self}__radioInput {

				&.-isDisabled,
				&.-isDisabled:checked,
				&[disabled] ~ * #{$self}__checkItem, &:disabled ~ * #{$self}__checkItem,
				&[disabled]:checked ~ * #{$self}__checkItem, &:disabled:checked ~ * #{$self}__checkItem {

					@include custom-prop-fallback("border-color", "comp-checkbox-disabled-background-color",true,true);

				}

			}
		}

	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}