/*------------------------------------*\
    MOBILE LAYOUT
\*------------------------------------*/
/**
 * Responsive layout. $mobile-breakpoint
 * dictates the
 */

@include media-query(palm) {
	// Nested/chained selectors for increased specificity
	.ssbp-container {
		transition: $animation-speed; // slide in
	}

	.ssbp-wrap[data-ssbp-responsive="true"] {
		position: fixed;
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 12;
		// background-color: rgba(255, 255, 255, 0.8);
		text-align: center;
		transform: none;
	}

	[data-ssbp-responsive="true"] {
		&[data-ssbp-toggle="true"] {
			padding-right: $icon-size; // Toggle switch absolutely positioned in this space
			.ssbp-toggle-switch {
				display: inline-block;
				left: auto;
				top: 0;
				right: 0;
				bottom: 0;
				width: auto;
				height: auto;
				background: rgba(255, 255, 255, 0.66);
				color: $grey;
				&:before {
					content: "\e618"; //chevron down
				}
			}
			&.ssbp--state-hidden {
				.ssbp-toggle-switch {
					&:before {
						content: "\e615"; //chevron down
					}
				}
			}
		}

		.ssbp-list {
			display: table;
			table-layout: fixed;
			width: 100%;
			li {
				display: inline-block !important;
				margin: 0 $icon-spacing !important;
				display: table-cell !important;
				width: auto;
				height: auto;
			}
		}

		.ssbp-btn {
			display: block;
			width: auto;
		}

		&.ssbp--state-hidden {
			.ssbp-container {
				transform: translateY(100%);
			}
		}
	}

	// Minimal tweaks for specific themes
	[data-ssbp-responsive="true"].ssbp--theme-1,
	[data-ssbp-responsive="true"].ssbp--theme-4,
	[data-ssbp-responsive="true"].ssbp--theme-6 {
		.ssbp-btn {
			display: inline-block;
			width: 3em; // from _mixins.scss @square
		}
		.ssbp-each-share {
			left: 50%;
			right: auto;
			margin-left: $icon-size/2;
		}
	}

	[data-ssbp-responsive="true"].ssbp--theme-2 {
		.ssbp-btn {
			width: inherit;
		}
	}

	// padded themes
	[data-ssbp-responsive="true"].ssbp--theme-1,
	[data-ssbp-responsive="true"].ssbp--theme-4,
	[data-ssbp-responsive="true"].ssbp--theme-6,
	[data-ssbp-responsive="true"].ssbp--theme-8 {
		padding: $icon-size/2;
		&[data-ssbp-toggle="true"] {
			padding-right: $icon-size/2 +$icon-size; //space for toggle
		}
		&.ssbp--state-hidden {
			.ssbp-container {
				margin-bottom: -$icon-size/2; // fully hides icons on state hidden otherwise padding shows
			}
		}
	}

	[data-ssbp-responsive="true"].ssbp--theme-7 {
		.ssbp-text {
			display: block;
		}
	}

	[data-ssbp-responsive="true"].ssbp--theme-8 {
		.ssbp-btn {
			display: inline-block;
			width: 4em; // from _mixins.scss @rectangle
		}
	}
}