/**
 * 辅助类 定义常见的字体、边框样式
 * @Author 瞿龙俊 - qulongjun@shine.design
 * @Date 2020-03-22 13:02
 */

// Margin & Padding
@mixin shine-margin-and-padding($mode) {
	@if $mode == general {
		$mode: '';
	} @else {
		$mode: "-" + $mode;
	}

	@for $i from 0 through 20 {
		$num: $i * 5;

		.#{$classPrefix}-margin-#{$num}#{$mode} {
			margin: #{$num}px !important;
		}

		.#{$classPrefix}-margin-t-#{$num}#{$mode} {
			margin-top: #{$num}px !important;
		}

		.#{$classPrefix}-margin-b-#{$num}#{$mode} {
			margin-bottom: #{$num}px !important;
		}

		.#{$classPrefix}-margin-l-#{$num}#{$mode} {
			margin-left: #{$num}px !important;
		}

		.#{$classPrefix}-margin-r-#{$num}#{$mode} {
			margin-right: #{$num}px !important;
		}

		.#{$classPrefix}-padding-#{$num}#{$mode} {
			padding: #{$num}px !important;
		}

		.#{$classPrefix}-padding-t-#{$num}#{$mode} {
			padding-top: #{$num}px !important;
		}

		.#{$classPrefix}-padding-b-#{$num}#{$mode} {
			padding-bottom: #{$num}px !important;
		}

		.#{$classPrefix}-padding-l-#{$num}#{$mode} {
			padding-left: #{$num}px !important;
		}

		.#{$classPrefix}-padding-r-#{$num}#{$mode} {
			padding-right: #{$num}px !important;
		}

		// short format
		.#{$classPrefix}-m#{$num}#{$mode} {
			margin: #{$num}px !important;
		}

		.#{$classPrefix}-mt-#{$num}#{$mode} {
			margin-top: #{$num}px !important;
		}

		.#{$classPrefix}-mb-#{$num}#{$mode} {
			margin-bottom: #{$num}px !important;
		}

		.#{$classPrefix}-ml-#{$num}#{$mode} {
			margin-left: #{$num}px !important;
		}

		.#{$classPrefix}-mr-#{$num}#{$mode} {
			margin-right: #{$num}px !important;
		}

		.#{$classPrefix}-p#{$num}#{$mode} {
			padding: #{$num}px !important;
		}

		.#{$classPrefix}-pt#{$num}#{$mode} {
			padding-top: #{$num}px !important;
		}

		.#{$classPrefix}-pb-#{$num}#{$mode} {
			padding-bottom: #{$num}px !important;
		}

		.#{$classPrefix}-pl#{$num}#{$mode} {
			padding-left: #{$num}px !important;
		}

		.#{$classPrefix}-pr#{$num}#{$mode} {
			padding-right: #{$num}px !important;
		}
	}
}

@include shine-margin-and-padding(general);

@include shine-desktop {
	@include shine-margin-and-padding(desktop);
}

@include shine-tablet {
	@include shine-margin-and-padding(tablet);
}

@include shine-tablet-and-mobile {
	@include shine-margin-and-padding(tablet-and-mobile);
}

@include shine-mobile {
	@include shine-margin-and-padding(mobile);
}

// Opacity
@mixin shine-opacity {
	@for $i from 1 through 9 {
		.#{$classPrefix}-opacity-#{$i} {
			opacity: #{$i * 0.1};
		}
	}
}

@include shine-opacity();

// Border radius
.#{$classPrefix}-radius-100 {
	border-radius: 100%;
}

// General helpers
.#{$classPrefix}-valign-top {
	vertical-align: top;
}

.#{$classPrefix}-space-5 {
	display: block;
	height: 0;
	margin-bottom: 5px;
}

.#{$classPrefix}-space-10 {
	display: block;
	height: 0;
	margin-bottom: 10px;
}

.#{$classPrefix}-space-15 {
	display: block;
	height: 0;
	margin-bottom: 15px;
}

.#{$classPrefix}-space-20 {
	display: block;
	height: 0;
	margin-bottom: 20px;
}

.#{$classPrefix}-space-30 {
	display: block;
	height: 0;
	margin-bottom: 30px;
}

.#{$classPrefix}-space-40 {
	display: block;
	height: 0;
	margin-bottom: 40px;
}

.#{$classPrefix}-valign-middle {
	vertical-align: middle;
}

.#{$classPrefix}-valign-bottom {
	vertical-align: bottom;
}

.#{$classPrefix}-block-center {
	margin-left: auto;
	margin-right: auto;
}

.#{$classPrefix}-align-right {
	text-align: right;
}

.#{$classPrefix}-align-left {
	text-align: left;
}

.#{$classPrefix}-align-center {
	text-align: center;
}

.#{$classPrefix}-pull-right {
	float: right;
}

.#{$classPrefix}-pull-left {
	float: left;
}

.#{$classPrefix}-img-rounded {
	border-radius: 50% !important;
}

.#{$classPrefix}-block-inline {
	display: inline-block;
}

.#{$classPrefix}-icon-middle {
	&:before {
		vertical-align: middle;
	}
}

// Element visibility
.#{$classPrefix}-hidden,
.#{$classPrefix}-hide {
	display: none !important;
}

// Font sizing
.#{$classPrefix}-font-sm {
	font-size: 0.8rem !important;
}

.#{$classPrefix}-font-md {
	font-size: 0.9rem !important;
}

.#{$classPrefix}-font-lg {
	font-size: 1.2rem !important;
}

.#{$classPrefix}-font-xl {
	font-size: 1.5rem !important;
}

.#{$classPrefix}-clearfix {
	@include shine-clearfix();
}

// Icon font sizing
.#{$classPrefix}-icon-sm {
	font-size: 0.75rem !important;
}

.#{$classPrefix}-icon-md {
	font-size: 0.9rem !important;
}

.#{$classPrefix}-icon-lg {
	font-size: 1.2rem !important;
}

.#{$classPrefix}-icon-xl {
	font-size: 1.4rem !important;
}


.#{$classPrefix}-marginless {
	margin: 0 !important;
}

.#{$classPrefix}-img-centered {
	text-align: center;
}

// Text Transform
.#{$classPrefix}-font-transform-u {
	text-transform: uppercase;
}

.#{$classPrefix}-font-transform-l {
	text-transform: lowercase;
}

.#{$classPrefix}-font-transform-c {
	text-transform: capitalize;
}

.#{$classPrefix}-font-transform-i {
	text-transform: initial;
}

// Font Weights
.#{$classPrefix}-font-regular {
	font-weight: 400 !important;
}
.#{$classPrefix}-font-bold {
	font-weight: 500 !important;
}

.#{$classPrefix}-font-bolder {
	font-weight: 600 !important;
}

.#{$classPrefix}-font-boldest {
	font-weight: 700 !important;
}

b, strong {
    font-weight: bold;
}

// State font color
@each $name, $color in $shine-state-colors {
	.#{$classPrefix}-font-#{$name} {
		color: shine-get($color, base) !important;
	}

	.#{$classPrefix}-font-hover-#{$name}{
		&:hover{
			color: darken(shine-get($color, base),20%);
		}
	}

	.#{$classPrefix}-font-inverse-#{$name} {
		color: shine-get($color, inverse) !important;
	}

	.#{$classPrefix}-bg-#{$name} {
		background-color: shine-get($color, base) !important;
	}

	.#{$classPrefix}-bg-fill-#{$name} {
		background-color: shine-get($color, base) !important;
		color: shine-get($color, inverse) !important;

		> i {
			color: shine-get($color, inverse) !important;
		}
	}

	.#{$classPrefix}-bg-light-#{$name} {
		background-color: rgba(shine-get($color, base), 0.1) !important;
	}
}

// Base colors
@each $name, $color in shine-get($shine-base-colors, label) {
	.#{$classPrefix}-label-font-color-#{$name} {
		color: $color !important;
	}

	.#{$classPrefix}-label-bg-color-#{$name} {
		background-color: $color !important;
	}
}

@each $name, $color in shine-get($shine-base-colors, shape) {
	.#{$classPrefix}-shape-font-color-#{$name} {
		color: $color !important;
	}

	.#{$classPrefix}-shape-bg-color-#{$name} {
		background-color: $color !important;
	}
}

// Responsive Helpers
.#{$classPrefix}-visible-desktop,
.#{$classPrefix}-visible-desktop-inline-block,
.#{$classPrefix}-visible-desktop-inline,
.#{$classPrefix}-visible-desktop-table,
.#{$classPrefix}-visible-desktop-table-cell,

.#{$classPrefix}-visible-tablet,
.#{$classPrefix}-visible-tablet-inline-block,
.#{$classPrefix}-visible-tablet-inline,
.#{$classPrefix}-visible-tablet-table,
.#{$classPrefix}-visible-tablet-table-cell,

.#{$classPrefix}-visible-tablet-and-mobile,
.#{$classPrefix}-visible-tablet-and-mobile-inline-block,
.#{$classPrefix}-visible-tablet-and-mobile-inline,
.#{$classPrefix}-visible-tablet-and-mobile-table,
.#{$classPrefix}-visible-tablet-and-mobile-table-cell,

.#{$classPrefix}-visible-mobile,
.#{$classPrefix}-visible-mobile-inline-block,
.#{$classPrefix}-visible-mobile-inline,
.#{$classPrefix}-visible-mobile-table,
.#{$classPrefix}-visible-mobile-table-cell {
	display: none !important;
}

@include shine-desktop {
	.#{$classPrefix}-visible-desktop {
		display: block !important;
	}

	.#{$classPrefix}-visible-desktop-inline-block {
		display: inline-block !important;
	}

	.#{$classPrefix}-visible-desktop-inline {
		display: inline !important;
	}

	.#{$classPrefix}-visible-desktop-table {
		display: table !important;
	}

	.#{$classPrefix}-visible-desktop-table-cell {
		display: table-cell !important;
	}

	.#{$classPrefix}-hidden-desktop {
		display: none !important;
	}
}

@include shine-tablet {
	.#{$classPrefix}-visible-tablet {
		display: block !important;
	}

	.#{$classPrefix}-visible-tablet-inline-block {
		display: inline-block !important;
	}

	.#{$classPrefix}-visible-tablet-inline {
		display: inline !important;
	}

	.#{$classPrefix}-visible-tablet-table {
		display: table !important;
	}

	.#{$classPrefix}-visible-tablet-table-cell {
		display: table-cell !important;
	}

	.#{$classPrefix}-hidden-tablet {
		display: none !important;
	}
}

@include shine-tablet-and-mobile {
	.#{$classPrefix}-visible-tablet-and-mobile {
		display: block !important;
	}

	.#{$classPrefix}-visible-tablet-and-mobile-inline-block {
		display: inline-block !important;
	}

	.#{$classPrefix}-visible-tablet-and-mobile-inline {
		display: inline !important;
	}

	.#{$classPrefix}-visible-tablet-and-mobile-table {
		display: table !important;
	}

	.#{$classPrefix}-visible-tablet-and-mobile-table-cell {
		display: table-cell !important;
	}

	.#{$classPrefix}-hidden-tablet-and-mobile {
		display: none !important;
	}
}

@include shine-mobile {
	.#{$classPrefix}-visible-mobile {
		display: block !important;
	}

	.#{$classPrefix}-visible-mobile-inline-block {
		display: inline-block !important;
	}

	.#{$classPrefix}-visible-mobile-inline {
		display: inline !important;
	}

	.#{$classPrefix}-visible-mobile-table {
		display: table !important;
	}

	.#{$classPrefix}-visible-mobile-table-cell {
		display: table-cell !important;
	}

	.#{$classPrefix}-hidden-mobile {
		display: none !important;
	}
}

// Flexbox helpers

.#{$classPrefix}-space-between {
	display: flex;
	justify-content: space-between;
}

// Rounded
.#{$classPrefix}-rounded {
	border-radius: $shine-border-radius !important;
}

// Negative Spacing
.#{$classPrefix}-negative-spacing {
	@for $i from 1 through 10 {
		&--#{$i}{
			margin-top: -#{$i}0px;
		}
	}
}