// ================================================================================
// + Base
// --------------------------------------------------------------------------------


// - Colors & Interaction: Mix-Ins
// --------------------------------------------------------------------------------

@mixin Icon-OutlineColor($SCOPED__TextOrBox, $SCOPED__Icon-OutlineColor) {
	#{$SCOPED__TextOrBox}-shadow:
		-1px -1px 0px $SCOPED__Icon-OutlineColor,
		 0px -1px 0px $SCOPED__Icon-OutlineColor,
		 1px -1px 0px $SCOPED__Icon-OutlineColor,
		 1px  0px 0px $SCOPED__Icon-OutlineColor,
		 1px  1px 0px $SCOPED__Icon-OutlineColor,
		 0px  1px 0px $SCOPED__Icon-OutlineColor,
		-1px  1px 0px $SCOPED__Icon-OutlineColor,
		-1px  0px 0px $SCOPED__Icon-OutlineColor,
		 0px  0px 1px $SCOPED__Icon-OutlineColor;
}

@mixin Icon-Colouring($SCOPED__Icon-Font_PaintColor, $SCOPED__Icon-Font_OutlineColor, $SCOPED__Icon-Shape_PaintColor, $SCOPED__Icon-Shape_OutlineColor, $SCOPED__Icon-BackgroundColor, $SCOPED__Icon-BorderColor) {
	color: $SCOPED__Icon-BorderColor;
	border-color: $SCOPED__Icon-BorderColor;
	background-color: $SCOPED__Icon-BackgroundColor;
	&:before, &:after {
		color: $SCOPED__Icon-Font_PaintColor;
		@if $SCOPED__Icon-Font_OutlineColor != transparent { @include Icon-OutlineColor("text", $SCOPED__Icon-Font_OutlineColor); }
	}
	span.bibi-shape-spreads {
		span.bibi-shape-spread {
			span.bibi-shape-item {
				border-color: $SCOPED__Icon-Shape_OutlineColor;
				background-color: $SCOPED__Icon-Shape_PaintColor;
			}
		}
	}
	&.bibi-icon-toggle-panel {
		>span {
			background-color: $SCOPED__Icon-Font_PaintColor;
			@if $SCOPED__Icon-Font_OutlineColor != transparent { @include Icon-OutlineColor("box", $SCOPED__Icon-Font_OutlineColor); }
		}
	}
}


// - Colors & Interaction: Default
// --------------------------------------------------------------------------------

.bibi-icon {
	.bibi-button.disabled & {
		&:before, &:after { opacity: 0.33 !important; }
	}
	#bibi-menu & {
		@include Icon-Colouring(
			$Menu-Icon-Font_PaintColor,
			$Menu-Icon-Font_OutlineColor,
			$Menu-Icon-Shape_PaintColor,
			$Menu-Icon-Shape_OutlineColor,
			$Menu-Icon_BackgroundColor,
			$Menu-Icon_BorderColor
		);
		&, &:before, &:after, * { transition: $Menu-Icon_Transition; }
		&:before, &:after { transform: $Menu-Icon_Transform; }
	}
	#bibi-slider & {
		@include Icon-Colouring(
			$Slider-Icon-Font_PaintColor,
			$Slider-Icon-Font_OutlineColor,
			$Slider-Icon-Shape_PaintColor,
			$Slider-Icon-Shape_OutlineColor,
			$Slider-Icon_BackgroundColor,
			$Slider-Icon_BorderColor
		);
		&, &:before, &:after, * { transition: $Slider-Icon_Transition; }
		&:before, &:after { transform: $Slider-Icon_Transform; }
	}
	.bibi-subpanel & {
		@include Icon-Colouring(
			$Subpanel-Icon-Font_PaintColor,
			$Subpanel-Icon-Font_OutlineColor,
			$Subpanel-Icon-Shape_PaintColor,
			$Subpanel-Icon-Shape_OutlineColor,
			$Subpanel-Icon_BackgroundColor,
			$Subpanel-Icon_BorderColor
		);
		&, &:before, &:after, * { transition: $Subpanel-Icon_Transition; }
		&:before, &:after { transform: $Subpanel-Icon_Transform; }
	}
}


// - Colors & Interaction: Default + Hover
// --------------------------------------------------------------------------------

.bibi-button.default { &.hover/*, &:hover*/ { .bibi-icon {
	#bibi-menu & {
		@include Icon-Colouring(
			$Menu-Icon-Font_PaintColor__Hover,
			$Menu-Icon-Font_OutlineColor__Hover,
			$Menu-Icon-Shape_PaintColor__Hover,
			$Menu-Icon-Shape_OutlineColor__Hover,
			$Menu-Icon_BackgroundColor__Hover,
			$Menu-Icon_BorderColor__Hover
		);
		&:before, &:after { transform: $Menu-Icon_Transform__Hover; }
	}
	#bibi-slider & {
		@include Icon-Colouring(
			$Slider-Icon-Font_PaintColor__Hover,
			$Slider-Icon-Font_OutlineColor__Hover,
			$Slider-Icon-Shape_PaintColor__Hover,
			$Slider-Icon-Shape_OutlineColor__Hover,
			$Slider-Icon_BackgroundColor__Hover,
			$Slider-Icon_BorderColor__Hover
		);
		&:before, &:after { transform: $Slider-Icon_Transform__Hover; }
	}
	.bibi-subpanel & {
		@include Icon-Colouring(
			$Subpanel-Icon-Font_PaintColor__Hover,
			$Subpanel-Icon-Font_OutlineColor__Hover,
			$Subpanel-Icon-Shape_PaintColor__Hover,
			$Subpanel-Icon-Shape_OutlineColor__Hover,
			$Subpanel-Icon_BackgroundColor__Hover,
			$Subpanel-Icon_BorderColor__Hover
		);
		&:before, &:after { transform: $Subpanel-Icon_Transform__Hover; }
	}
}}}


// - Colors & Interaction: Active
// --------------------------------------------------------------------------------

.bibi-button.active { .bibi-icon {
	#bibi-menu & {
		@include Icon-Colouring(
			$Menu-Icon-Font_PaintColor__Active,
			$Menu-Icon-Font_OutlineColor__Active,
			$Menu-Icon-Shape_PaintColor__Active,
			$Menu-Icon-Shape_OutlineColor__Active,
			$Menu-Icon_BackgroundColor__Active,
			$Menu-Icon_BorderColor__Active
		);
		&:before, &:after { transform: $Menu-Icon_Transform__Active; }
	}
	#bibi-slider & {
		@include Icon-Colouring(
			$Slider-Icon-Font_PaintColor__Active,
			$Slider-Icon-Font_OutlineColor__Active,
			$Slider-Icon-Shape_PaintColor__Active,
			$Slider-Icon-Shape_OutlineColor__Active,
			$Slider-Icon_BackgroundColor__Active,
			$Slider-Icon_BorderColor__Active
		);
		&:before, &:after { transform: $Slider-Icon_Transform__Active; }
	}
	.bibi-subpanel & {
		@include Icon-Colouring(
			$Subpanel-Icon-Font_PaintColor__Active,
			$Subpanel-Icon-Font_OutlineColor__Active,
			$Subpanel-Icon-Shape_PaintColor__Active,
			$Subpanel-Icon-Shape_OutlineColor__Active,
			$Subpanel-Icon_BackgroundColor__Active,
			$Subpanel-Icon_BorderColor__Active
		);
		&:before, &:after { transform: $Subpanel-Icon_Transform__Active; }
	}
}}


// - Colors & Interaction: Active + Hover
// --------------------------------------------------------------------------------

.bibi-button-normal, .bibi-button-toggle { &.active { &.hover/*, &:hover*/ { .bibi-icon {
	#bibi-menu & {
		@include Icon-Colouring(
			$Menu-Icon-Font_PaintColor__Active-Hover,
			$Menu-Icon-Font_OutlineColor__Active-Hover,
			$Menu-Icon-Shape_PaintColor__Active-Hover,
			$Menu-Icon-Shape_OutlineColor__Active-Hover,
			$Menu-Icon_BackgroundColor__Active-Hover,
			$Menu-Icon_BorderColor__Active-Hover
		);
		&:before, &:after { transform: $Menu-Icon_Transform__Active-Hover; }
	}
	#bibi-slider & {
		@include Icon-Colouring(
			$Slider-Icon-Font_PaintColor__Active-Hover,
			$Slider-Icon-Font_OutlineColor__Active-Hover,
			$Slider-Icon-Shape_PaintColor__Active-Hover,
			$Slider-Icon-Shape_OutlineColor__Active-Hover,
			$Slider-Icon_BackgroundColor__Active-Hover,
			$Slider-Icon_BorderColor__Active-Hover
		);
		&:before, &:after { transform: $Slider-Icon_Transform__Active-Hover; }
	}
	.bibi-subpanel & {
		@include Icon-Colouring(
			$Subpanel-Icon-Font_PaintColor__Active-Hover,
			$Subpanel-Icon-Font_OutlineColor__Active-Hover,
			$Subpanel-Icon-Shape_PaintColor__Active-Hover,
			$Subpanel-Icon-Shape_OutlineColor__Active-Hover,
			$Subpanel-Icon_BackgroundColor__Active-Hover,
			$Subpanel-Icon_BorderColor__Active-Hover
		);
		&:before, &:after { transform: $Subpanel-Icon_Transform__Active-Hover; }
	}
}}}}


// - Colors & Interaction: Disabled
// --------------------------------------------------------------------------------

.bibi-button.disabled .bibi-icon {
	#bibi-menu     & { &:before, &:after { opacity: $Menu-Icon_Opacity__Disabled     !important; } }
	#bibi-slider   & { &:before, &:after { opacity: $Slider-Icon_Opacity__Disabled   !important; } }
	.bibi-subpanel & { &:before, &:after { opacity: $Subpanel-Icon_Opacity__Disabled !important; } }
}




// ================================================================================
// + General Icons
// --------------------------------------------------------------------------------


// - General Icons' Common Style
// --------------------------------------------------------------------------------

// -- In Menu
.bibi-icon-config,
.bibi-icon-change-fontsize,
.bibi-icon-loupe,
.bibi-icon-manage-bookmarks,
// -- In Slider
.bibi-icon-history,
// -- In Subpanel
.bibi-icon-full-breadth-layout,
.bibi-icon-toggle-fullscreen,
.bibi-icon-open-newwindow,
.bibi-icon-fontsize,
.bibi-icon-bookmark { @include GENERALICON__Common(); }


// - General Icons in Menu
// --------------------------------------------------------------------------------

.bibi-icon-config,
.bibi-icon-change-fontsize,
.bibi-icon-loupe,
.bibi-icon-manage-bookmarks { @include GENERALICON__CommonInMenu(); }

.bibi-icon-config { @include GENERALICON__Config(); }

.bibi-icon-change-fontsize { @include GENERALICON__ChangeFontSize(); }

.bibi-icon-loupe { @include GENERALICON__LoupeCommon();
	&-zoomin  { @include GENERALICON__LoupeZoomIn(); }
	&-zoomout { @include GENERALICON__LoupeZoomOut(); }
	&-reset   { @include GENERALICON__LoupeReset(); }
}

.bibi-icon-manage-bookmarks { @include GENERALICON__ManageBookmarks(); }


// - General Icons in Slider
// --------------------------------------------------------------------------------

.bibi-icon-history { @include GENERALICON__CommonInSlider(); }

.bibi-icon-history { @include GENERALICON__History(); }


// - General Icons in Subpanels
// --------------------------------------------------------------------------------

.bibi-icon-full-breadth-layout,
.bibi-icon-toggle-fullscreen,
.bibi-icon-open-newwindow,
.bibi-icon-fontsize,
.bibi-icon-bookmark { @include GENERALICON__CommonInSubpanels(); }

.bibi-icon-full-breadth-layout { @include GENERALICON__UseFullBreadth(); }

.bibi-icon-toggle-fullscreen { @include GENERALICON__ToggleFullscreen(); }

.bibi-icon-open-newwindow { @include GENERALICON__OpenNewWindow(); }

.bibi-icon-fontsize { @include GENERALICON__FontSizeCommon();
	&-exlarge { @include GENERALICON__FontSizeXL(); }
	&-large   { @include GENERALICON__FontSizeL(); }
	&-medium  { @include GENERALICON__FontSizeM(); }
	&-small   { @include GENERALICON__FontSizeS(); }
	&-exsmall { @include GENERALICON__FontSizeXS(); }
}

.bibi-icon-bookmark { @include GENERALICON__BookmarkCommon(); }
	.bibi-icon-add-a-bookmark { @include GENERALICON__AddABookmark(); }
	.bibi-icon-a-bookmark { @include GENERALICON__ABookmark(); }




// ================================================================================
// + Special Icons
// --------------------------------------------------------------------------------


// - "Toggle Panel" Icon in Menu
// --------------------------------------------------------------------------------

.bibi-icon-toggle-panel {
	@include SPECIALICON__TogglePanel();
	.bibi-button.active & { @include SPECIALICON__TogglePanel__Active(); }
}


// - "View Xxxx" Icons in Subpanels
// --------------------------------------------------------------------------------

.bibi-icon-view { @include SPECIALICON__View_Common();
	&-paged      { @include SPECIALICON__ViewPaged(); }
	&-horizontal { @include SPECIALICON__ViewHorizontal(); }
	&-vertical   { @include SPECIALICON__ViewVertical(); }
}