// Component background - used to apply variable based background color and padding on components
// --------------------------------------------------
.component-background {
	background-color: @background;
	padding: @component-body-margin;
}

// Remove article min-height
// --------------------------------------------------
.remove-minHeight {
  min-height: 10px;
}

// Remove menu header if no title or body is used
// --------------------------------------------------
.remove-menu-header {
  .menu__header {
    display: none;
  }
}

// Remove page header if no title is used
// --------------------------------------------------
.remove-page-header {
	.page__header {
		display: none;
	}
}

// Use either of these if the page header is utilised
// --------------------------------------------------
.firstArticle {
	@media all and (min-width: (@device-width-small + 20px)) {
		// Main height minus the page header height
    min-height: @content-height - 78px;
  }
}

.firstBlock {
	@media all and (min-width: (@device-width-small + 20px)) {
		// Main height minus the page header height
    min-height: @content-height - 78px;
  }
}

// Use this to add min height to assessment article questions
// --------------------------------------------------
.add-min-height-block {
	.block {
		@media all and (min-width: (@device-width-small + 20px)) {
			min-height: @content-height;
	  }
	}
}

// Disclaimer text styling
// --------------------------------------------------
.disclaimer,
.body-link {
	font-weight: @font-weight-bold !important;
	text-decoration: underline !important;
	color: @btn-color !important;
	&:hover {
		color: @btn-color-hover !important;
	}
}

// Question Icon
// -- Add class to component classes json field
// --------------------------------------------------
.question-icon {
	.component__body {
		background-image: url(assets/question-icon.png);
		background-repeat:no-repeat;
		background-position: top left;
		padding-left: 80px;
		padding-top: @component-body-margin*2;
		min-height: 40px;

		.dir-rtl & {
			background-image: url(assets/question-icon-rtl.png);
			background-position: top right;
			padding-left: @component-body-margin;
			padding-right: 80px;
    }
	}
	.component__instruction {
		padding-left: 80px;
		.dir-rtl & {
			padding-left: @component-body-margin;
			padding-right: 80px;
    }
	}
}

// Resize video - 80%
// --------------------------------------------------
.resize-video-80-pc {
	@media all and (min-width:@device-width-medium) {
		.component__widget,
		.media-transcript-container {
			width: 80% !important;
			margin: 0 auto;
		}

		.media-instruction-container {
			left: 11.4% !important;
			.dir-rtl & {
				left: 0 !important;
				right: 11.4% !important;
			}
			@media all and (min-width: (@device-width-small)) {
				left: 0 !important;
				right: 0 !important;
			}
		}

		.media-options-container {
			right: 11.4% !important;
			.dir-rtl & {
				right: inherit !important;
				left: 11.4% !important;
			}
			@media all and (min-width: (@device-width-small)) {
				left: 0 !important;
				right: 0 !important;
			}
		}
	}
}

// Full width video in single article
// --------------------------------------------------
.single-article-media {
	overflow: hidden;
	background-color: transparent;
	@media all and (max-width: (@device-width-small + 20px)) {
		min-height: 10px;
	}

	.article__inner {
	  padding: 0px;
  }

	.block__inner {
		max-width: @max-width;
		margin: 0px;
		padding: 0px;
  }

	.component__inner {
		padding: 0px;
  }

  .component__container,
  .media-transcript-container,
  .trickle-button {
    padding-bottom: 0px;
  }
}

// Full width video
// --------------------------------------------------
.full-width-media {
	@media all and (max-width: (@device-width-small + 20px)) {
		min-height: 10px;
	}
	.article__inner {
		padding: @component-body-margin *2;
		padding-top: @component-body-margin;

		@media all and (min-width: (@device-width-popup + 20px)) {
			padding: 0px;
		}
	}

	.block__inner {
		max-width: @max-width;
		margin: 0px;
		padding: 0px;
  }

  .component__inner {
		padding: 0px;
  }

  .component__container,
  .media-transcript-container,
  .trickle-button {
		padding-bottom: 0px;
  }

	.media-options-container {
		right: 0px !important;
		.dir-rtl & {
			right: inherit !important;
			left: 0px !important;
		}
	}
}

// Remove padding from the widget
// --------------------------------------------------
.remove-widget-padding {
	.component__widget {
		padding: 0px !important;
	}
}

// Icon-popup transcript button on top of video
// --------------------------------------------------
.icon-popup-transcript {
	position: absolute;
	max-width: 3000px !important;
	top: @component-body-margin !important;
	left: -@component-body-margin !important;
	.dir-rtl & {
		left: @component-body-margin !important;
    right: -@component-body-margin !important;
  }

	button {
		border-radius: 0px 0px 0px @btn-border-radius;
		-moz-border-radius: 0px;
		-webkit-border-radius: 0px 0px 0px @btn-border-radius;

		padding-left: @component-body-margin;
		.dir-rtl & {
			padding-left: 10px;
			padding-right: @component-body-margin;
		}
	}
}

// Remove Complete -- Block Title -- Container Background
// --------------------------------------------------
.remove-bg-block-title {
	.block__title {
		background-color: transparent;
	}
}

// Remove Complete -- Block Body Inner -- Container Background
// --------------------------------------------------
.remove-bg-block-body-inner {
	.block__body-inner {
		background-color: transparent;
	}
}

// Remove Complete -- Block Instruction -- Container Background
// --------------------------------------------------
.remove-bg-block-instruction {
	.block__instruction {
		background-color: transparent;
	}
}

// Remove Complete BLock-level Container Background
// --------------------------------------------------
.remove-bg-block-level {
	.remove-bg-block-title;
	.remove-bg-block-body-inner;
	.remove-bg-block-instruction;
}

// Remove Complete -- Component Container -- Container Background
// --------------------------------------------------
.remove-bg-component-container {
	.component__container {
		background-color: transparent;
	}
}

// Remove Instruction text on mobile sizes -- Useful for the blockslider extension
// --------------------------------------------------
.remove-instruction-mobile {
	@media all and (max-width: (@device-width-small + 20px)) {
    .component__instruction-inner {
      display: none;
    }
  }
}

// Expand block body text to full width
// --------------------------------------------------
.full-width-block {
	.block__inner {
		max-width: 3000px !important;
	}
	.block__title {
		text-align: center;
    .dir-rtl & {
      text-align: center;
    }
  }
  .block__body-inner,
  .block__instruction-inner,
	.component__container {
		max-width: @device-width-large;
		margin: auto;
	}
}

// Expand component body text to full width
// --------------------------------------------------
.full-width-component {
	.block__inner {
		max-width: 3000px !important;
	}
	.component__title,
	.component__body-inner,
	.component__instruction-inner {
		max-width: @device-width-large - (@component-body-margin*2);
		margin: auto;
	}
	.component__widget,
	.audio-inner {
		max-width: @device-width-large;
		margin: auto;
	}
}

// Smaller component at 70%
// --------------------------------------------------
.medium-width-component {
	@media all and (min-width:@device-width-medium) {
		max-width: 70%;
		margin: auto;
	}
}

// Medium width widget at 70%
// --------------------------------------------------
.medium-width-widget {
	@media all and (min-width: @device-width-medium) {
		.component__widget {
			width: 70%;
			margin: auto;
		}
  }
}

// Add default BG color to component
// --------------------------------------------------
.add-component-bg {
  .component__widget {
		background-color: @text-background-color;
    margin-top: 0px;
    padding: 0 @component-body-margin @component-body-margin @component-body-margin;
  }
  .btn__container {
    background-color: @text-background-color;
    margin-top: 0px;
    padding: @component-body-margin;
    padding-top: 0px;
  }
}

// Add default BG color to compoent inner for summary pages
// --------------------------------------------------
.add-component-inner-bg {
	.component__body,
	.component__instruction {
		background-color: transparent;
	}
	.component__inner {
		background-color: @text-background-color;
	}
}

// Remove default title BG color on component
// --------------------------------------------------
.remove-component-title-bg {
	.component__title {
		background-color: transparent;
	}
}

// Remove default BG color on component
// --------------------------------------------------
.remove-component-bg {
	.component__body,
	.component__instruction {
		background-color: transparent;
	}
}

// Add shadow to top edge
// --------------------------------------------------
.add-top-shadow {
	-moz-box-shadow: 0 10px 10px -8px #999;
	-webkit-box-shadow: 0 10px 10px -8px #999;
	box-shadow: inset 0 10px 10px -8px #999;
}

// Centered image
// --------------------------------------------------
.centered-image {
  .component__widget {
		img {
      display:block;
      margin-left: auto;
      margin-right: auto;
    }
  }
}

// // Question-component (left)
// --------------------------------------------------
// Apply to component
// USED WHEN COMPONENT IN LEFT BLOCK AND GRAPHIC IN RIGHT BLOCK
.half-component-bg {
	.component__inner {
		margin-right: 0%;
	}
	.add-component-bg;
}

/************************************************************************************
USAGE:   (Left) Interactive component / (Right) Graphic
-----    Add class below to a block and class above to the component

.bg-10-1 {
	// CUSTOM -- Use in conjunction with 'c-10-1-1' class below
	.component-container {
		padding: 0px;
		background: transparent;

		@media all and (min-width: @device-width-medium) {
			background-image: url(../../course/en/images/half-width-graphic.jpg);
			background-position: top right;
			background-repeat:repeat;
		}
	}
}

.c-10-1 {
	// CUSTOM -- Use in conjunction with 'b-10-1' class above
	.half-component-bg;
}
************************************************************************************/

// Remove 'Show feedback' button on question component - Applied to assessment article
// Class to center the submit button when feedback button isn't used
// Class to remove the feedback button on a question component
// --------------------------------------------------
.remove-showFeedback,
.single-submit-button,
.remove-feedback-button {

	.btn__response-container {
		justify-content: center;
	}

	.btn__marking {
		left: @item-margin;
		right: inherit;

		.dir-rtl & {
			left: inherit;
			right: @item-margin;
		}
	}

	.btn__action {
		width: auto;
		float: none;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

// Classes to add icons within the body text
// --------------------------------------------------
.body-resource-icon {
  .icon;
  &:before {
    content: "\e932";
    color: @btn-color;
  }
  vertical-align: middle;
  display: inline-block;
}

.body-help-icon {
  .icon;
  &:before {
    content: "\e949";
    color: @btn-color;
  }
  vertical-align: middle;
  display: inline-block;
}

.body-warning-icon {
  .icon;
  &:before {
    content: "\e94a";
    color: @btn-color;
  }
  vertical-align: middle;
  display: inline-block;
}

.body-lightbulb-icon {
	.icon;
	&:before {
		content: "\e93a";
		color: @btn-color;
	}
	vertical-align: middle;
	display: inline-block;
}

.body-question-icon {
	.icon;
	&:before {
		content: "\e949";
		color: @btn-color;
	}
	vertical-align: middle;
	display: inline-block;
}

// Trickle
// --------------------------------------------------
.trickle-tab-button {
  .trickle__btn {
    width: auto !important;
    padding-left: @btn-padding * 3;
    padding-right: @btn-padding  *3;

    border-radius: 20px 20px 0px 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 20px 20px 0px 0px;
  }
}
