_boxes.scss

@use "sass:math";

@include body-class(true) {

	* {
		box-sizing: border-box;
	}

	*:before,
	*:after {
		box-sizing: border-box;
	}

	// ELEMENT: Box
	.sui-box {
		min-height: 20px;
		position: relative;
		border-radius: $border-radius;
		background-color: $box-bg-color;
		box-shadow: 0 2px 0 $box-box-shadow-color;

		// BOX: Header
		.sui-box-header {
			border-bottom: 1px solid $box-header-border-color;
			padding: 15px 30px;
			display: flex;
			align-items: center;

			@include media( max-width, md ) {
				padding: 15px $sui-gutter-md;
			}

			& > h3 > [class*="sui-icon-"] {
				line-height: 30px;
			}
		}

		// BOX: Body
		.sui-box-body {

			@include media(max-width, md) {
				padding: $sui-gutter-md;
			}

			@include media(min-width, md) {
				padding: $sui-gutter;
			}
		}

		// BOX: Footer
		.sui-box-footer {
			border-top: 1px solid $box-footer-border-color;
			padding: 30px;
			display: flex;
			align-items: center;
			&.sui-pull-up {
				margin-top: -15px;
			}

			@include media( max-width, md ) {
				padding: $sui-gutter-md;
			}
		}

		// BOX: Status Bar
		.sui-box-status {
			padding: 0 $sui-gutter-md $sui-gutter-md;

			.sui-status {
				display: flex;

				[class*="sui-status-"] {
					font-size: 12px;
					line-height: 30px;
					font-family: $font;
					letter-spacing: $font--letter-spacing;

					.sui-tag {
						margin-left: 8px;
					}

					[class*="sui-icon-"] {
						margin-right: 4px;
						font-size: 12px;

						&:before {
							display: block;
						}
					}

					&:not(:last-child) {
						margin-right: 20px;
					}

					&:not(:first-child) {
						padding-left: 20px;
						border-left: 1px solid palette(silver, soft);
					}
				}

				.sui-status-module {
					color: palette(gray, light);
					font-weight: bold;
				}

				.sui-status-changes {
					color: palette(silver, medium);
					font-weight: 500;
					letter-spacing: $font--letter-spacing;

					.sui-icon-check-tick:before {
						color: palette(green, default);
					}

					.sui-icon-update:before {
						color: palette(gray, light);
					}
				}

				+ .sui-actions {

					@include media(max-width, md) {
						display: inline-block;
						margin-top: math.div($sui-gutter, 2);
					}

					@include media(min-width, md) {
						margin-left: math.div($sui-gutter, 2);
					}
				}

				@include media(min-width, md) {
					flex: 1;
				}

				@include media(max-width, md) {
					display: inline-flex;
					margin-right: math.div($sui-gutter, 2);
					margin-top: math.div($sui-gutter, 2);
				}
			}

			.sui-actions {

				@include media(min-width, md) {
					flex: 0 0 auto;
				}
			}

			@include media(min-width, md) {
				display: flex;
				padding: math.div($sui-gutter, 2) $sui-gutter;
			}
		}

		// BOX: Search Bar
		.sui-box-search {

			> * {
				max-width: 100%;
				flex: 0 1 auto;
			}

			> .sui-search-left {

				&:not(:last-child) {

					@include media(min-width, md) {
						margin-right: math.div($sui-gutter, 2);
					}
				}

				@include media(min-width, md) {
					display: flex;
					flex: 1;
				}
			}

			> .sui-search-right {

				&:only-child {

					@include media(min-width, md) {
						flex: 1;
					}
				}

				&:not(:only-child) {

					&:not(:last-child) {

						@include media(min-width, md) {
							margin-right: math.div($sui-gutter, 2);
						}
					}

					@include media(min-width, md) {
						flex: 0 0 auto;
					}
				}
			}

			@include media(min-width, md) {
				display: flex;
			}
		}

		// BOX: Sticky box
		&.sui-box-sticky {

			@include media(min-width, md) {
				position: sticky !important;
				top: 32px;
				z-index: 12;
			}
          &.sui-is-sticky {
              box-shadow: 0 5px 25px rgba(0, 0, 0, .15);
          }
		}

		> .sui-box-search {
			padding-top: math.div($sui-gutter, 2);
			padding-bottom: math.div($sui-gutter, 2);

			@include media(max-width, md) {
				padding-right: $sui-gutter-md;
				padding-left: $sui-gutter-md;
			}

			@include media(min-width, md) {
				padding-right: $sui-gutter;
				padding-left: $sui-gutter;
			}
		}

		&:last-child {

			@include media(max-width, md) {
				margin-bottom: 0;
			}

			@include media(min-width, md) {
				margin-bottom: 0;
			}
		}

		@include media(max-width, md) {
			margin-bottom: $sui-gutter-md;
		}

		@include media(min-width, md) {
			margin-bottom: $sui-gutter;
		}
	}

	// ELEMENT: Box Message
	// Commonly used for "empty message" or text with image on top.
	// To use with sui-box preferrably.
	.sui-message {
		display: block;
		text-align: center;

		.sui-message-content {
			max-width: 600px;
			margin-right: auto;
			margin-left: auto;

			h1, h2, h3, h4, h5, h6 {
				margin: 0 0 $sui-gutter-md;

				&:last-child {
					margin-bottom: 0;
				}
			}

			p {
				margin: 0 0 $sui-gutter;
				letter-spacing: -0.25px;

				&:last-child {
					margin-bottom: 0;
				}
			}

			@include media(max-width, md) {
				margin-top: $sui-gutter-md;
				margin-bottom: $sui-gutter-md;
			}

			@include media(min-width, md) {
				margin-top: $sui-gutter;
				margin-bottom: $sui-gutter;
			}
		}

		// SIZE: Regular
		&:not(.sui-message-lg) {

			.sui-image {
				margin: 10px auto;
			}

			.sui-message-content {

				&:first-child {
					margin-top: 0;
				}

				&:last-child {
					margin-bottom: 0;
				}
			}
		}

		// SIZE: Large
		&.sui-message-lg {

			.sui-image {
				margin: $sui-gutter auto;
			}
		}

		&:first-child {
			margin-top: 0;
		}

		&:last-child {
			margin-bottom: 0;
		}

		@include media(max-width, md) {
			padding: $sui-gutter-md;
		}

		@include media(min-width, md) {
			padding: $sui-gutter;
		}
	}

	// ELEMENT: Box Title
	.sui-box {

		.sui-box-title {
			display: block;
			margin: 0;
			padding: 0;
			border: 0;
			color: palette(gray, dark);
			font: $font--weight-bold 15px/30px $font;
			text-transform: none;
			@include text-truncate;

			* {
				vertical-align: middle;
			}

			[class*="sui-icon-"] {
				float: left;
				display: block;
				margin-right: 10px;

				&:before {
					color: inherit;
					font-size: 20px;
					vertical-align: text-bottom;
				}
			}
		}
	}

	// ELEMENT: Upsell
	.sui-box-body {

		.sui-upsell-row {
			position: relative;

			.sui-upsell-image {
				width: 100px;
				position: absolute;
				bottom: 0;

				@include media(max-width, md) {
					display: none;
				}
			}

			.sui-upsell-notice {

				p {
					position: relative;
					padding: 15px 20px 15px 43px;
					border-radius: $border-radius;
					color: $box-upsell-p-color;
					font-size: 13px;
					line-height: 22px;
					border-top: 1px solid #e6e6e6;
					border-right: 1px solid #e6e6e6;
					border-bottom: 1px solid #e6e6e6;
					border-left: 2px solid $box-upsell-border-color;

					a {
						color: $box-upsell-p-color;
						font-weight: 500;
					}
					&:first-of-type {
						@include icon( before, info );
						&:before {
							color: $box-upsell-border-color;
							margin-left: -23px;
							margin-right: 10px;
						}
					}
				}

				@include media(min-width, md) {
					padding-left: 130px;
				}
			}
		}

		&.sui-upsell-items {
			padding: 0;
		}
	}

	// ELEMENT: Other(s)
	.sui-box-body {

		.sui-settings-box {
			padding: $sui-gutter-md;
			border: 1px solid $box-settings-box-border-color;
			border-radius: $border-radius;

			@include media(min-width, md) {
				padding: $sui-gutter;
			}
		}
	}

	.sui-with-bottom-border {
		margin-bottom: $default-margin;
		padding-bottom: $default-padding;
		border-bottom: 1px solid $box-settings-box-border-color;

		@include media(max-width, md) {
			margin-bottom: $sui-gutter-md;
			padding-bottom: $sui-gutter-md;
		}
	}

	.sui-border-frame {
		margin: 10px 0 0;
		border: 1px solid palette(silver, soft);
		border-radius: $border-radius;

		&:not(:last-child) {

			@include media(max-width, md) {
				margin-bottom: $sui-gutter-md;
			}

			@include media(min-width, md) {
				margin-bottom: $sui-gutter;
			}
		}

		@include media(max-width, md) {
			padding: $sui-gutter-md;
		}

		@include media(min-width, md) {
			padding: $sui-gutter;
		}
	}
}