@include body-class(true) {

	.#{$prefix}-loader {
		overflow: hidden;
		position: relative;

		.#{$prefix}-loader--mask {
			width: 100%;
			height: 100%;
			display: flex;
			flex-flow: row wrap;
			align-items: center;
			justify-content: center;
			position: absolute;
			z-index: 1;
			top: 0;
			left: 0;
			background-color: rgba(255, 255, 255, 0.65);
			color: palette(gray, light);
			font: 400 13px/22px $font;
			letter-spacing: -0.2px;

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

				&:before {
					display: block;
				}
			}
		}

		.#{$prefix}-loader--content {
			display: flex;
			flex-flow: row wrap;
			align-items: center;
			padding: 20px 29px;

			.#{$prefix}-loader--checkbox {
				width: 16px;
				height: 16px;
				flex: 0 0 auto;
				margin-right: 15px;
				border: 1px solid palette(gray, lighter);
				border-radius: $border-radius;
				background-color: #FAFAFA;
			}

			.#{$prefix}-loader--image {
				width: 60px;
				height: 40px;
				flex: 0 0 auto;
				margin-right: 10px;
				margin-left: 10px;
				border-radius: $border-radius;
				background-color: palette(silver, soft);
			}

			.#{$prefix}-loader--name {
				flex: 1;

				span {
					width: 100%;
					max-width: 600px;
					height: 20px;
					display: block;
					background-color: palette(silver, light);
				}
			}

			.#{$prefix}-loader--actions {
				flex: 0 0 auto;
				margin-left: 15px;
			}
		}
	}
}