/*! v0.7.3 | MIT License | github.com/webgoto/stre */

/*########################################
         FUNCTION
########################################*/
//=====================================
@function change_lightness($color, $amount) {
	@if (lightness($color) > 25) {
		@return darken($color, $amount);
	} @else {
		@return lighten($color, $amount);
	}
}
/*########################################
         VARIABLE
########################################*/
$prefix: "st_";

/*========================================
         Button
========================================*/
@mixin make_button($name, $color_text, $color_bg){
	.#{$prefix}btn#{$name}{
		color: $color_text;
		background: $color_bg;
		border: 1px solid $color_bg;
	}
	.#{$prefix}btn#{$name}.#{$prefix}btn_rich{
		border-color: darken($color_bg, 4%);
		text-shadow:0 1px 0 darken($color_bg, 2%);
	}
	.#{$prefix}btn#{$name}.#{$prefix}btn_depth{
		top: -3px;
		box-shadow: 0 3px darken($color_bg, 8%);
	}
	.#{$prefix}btn#{$name}[class*="#{$prefix}btn_line"]{
		color: $color_bg;
	}
	@media(hover: hover){
		.#{$prefix}btn#{$name}:hover:not([disabled]){
			background: change_lightness($color_bg, 4%);
		}
		.#{$prefix}btn#{$name}.#{$prefix}btn_depth:hover:not([disabled]){
			background: $color_bg;
			top: -2px;
			box-shadow: 0 2px darken($color_bg, 8%);
		}
		.#{$prefix}btn#{$name}[class*="#{$prefix}btn_line"]:hover:not([disabled]){
			background: $color_bg;
			color: $color_text;
		}
	}
}

[class*="#{$prefix}btn"]:not(.#{$prefix}btn_group){
	box-sizing: border-box;
	text-align: center;
	font-size: 13px;
	padding: 0px 13px;
	line-height: 34px;
	height: 34px;
	display: inline-block;
	transition: background-color 0.3s, color 0.3s;
	position: relative;
	appearance: none;
	cursor: pointer;
	vertical-align: middle;
}
[class*="#{$prefix}btn"]:not(.#{$prefix}btn_group)[disabled]{
	transition: 0s;
	opacity: 0.5;
	cursor: not-allowed;
}
[class*="#{$prefix}btn"]:not(.#{$prefix}btn_group):active{top: 1px;}

:root .#{$prefix}btn_sm{font-size: 11px;padding: 0px 9px;line-height: 26px;height: 26px;}
:root .#{$prefix}btn_lg{font-size: 15px;padding: 0px 17px;line-height: 42px;height: 42px;}
:root .#{$prefix}btn_round{border-radius: 4px;}
:root .#{$prefix}btn_oval{border-radius: 999px;}
:root .#{$prefix}btn_rich{box-shadow: 0 1px 0 rgba(255,255,255,0.3)inset;}
:root .#{$prefix}btn_depth.#{$prefix}btn_depth.#{$prefix}btn_depth:active:not([disabled]){top: 0px;box-shadow: none;}
:root .#{$prefix}btn_line.#{$prefix}btn_line{background: none;border-width: 1px;}
:root .#{$prefix}btn_lineb.#{$prefix}btn_lineb{background: none;border-width: 2px;}

.#{$prefix}btn_group{display: flex;justify-content: space-around;width: 100%;}
.#{$prefix}btn_group > *{width: 50%;word-break: break-all;}
.#{$prefix}btn_group > *:not(:first-child):not(:last-child){border-radius: 0 0 0 0;}
.#{$prefix}btn_group > *:first-child{border-top-right-radius: 0;border-bottom-right-radius: 0;}
.#{$prefix}btn_group > *:last-child{border-top-left-radius: 0;border-bottom-left-radius: 0;}
.#{$prefix}btn_group > *:not(:last-child){border-right: none;}
.#{$prefix}btn_group > .#{$prefix}btn_line + .#{$prefix}btn_line{margin-left: -1px;}
.#{$prefix}btn_group > .#{$prefix}btn_lineb + .#{$prefix}btn_lineb{margin-left: -2px;}

//depthを押した時、位置がずれる対策
.#{$prefix}btn_depth:before{
	content: ' ';
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
@media(hover: hover){
	.#{$prefix}btn_depth:hover:before{
		top: -1px;
		bottom: 1px;
	}
}
.#{$prefix}btn_depth:active:before{
	top: -3px;
	bottom: 3px;
}
.#{$prefix}btn_round:before{
	border-radius: 4px;
}

.#{$prefix}btn_oval:before{
	border-radius: 999px;
}

/*========================================
         Form
========================================*/
.#{$prefix}form_input,
.#{$prefix}form_input[type="checkbox"] + span,
.#{$prefix}form_input[type="radio"] + span{
	appearance: none;
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	height: 34px;
	line-height: 34px;
	padding: 0 8px;
	font-size: 14px;
	border-radius: 3px;
	vertical-align: middle;
}

textarea.#{$prefix}form_input.#{$prefix}form_input{
	height: auto;
	line-height: 1.5;
	padding-top: 0.6em;
	padding-bottom: 0.6em;
}

select.#{$prefix}form_input.#{$prefix}form_input{
	background-repeat: no-repeat;
	background-position: right 6px center;
	background-size: 9px 6px;
	padding-right: 20px;
	&::-ms-expand{
		display: none;
	}
}

.#{$prefix}form_input[type='checkbox'],
.#{$prefix}form_input[type='radio']{
	position: absolute;
	left: -99999px;
	& + span{
		display: inline-block;
		width: 18px;
		height: 18px;
		position: relative;
		padding: 0;
	}
	&:checked + span:after{
		position: absolute;
		content: " ";
	}

	.#{$prefix}form_sm & + span,
	&.#{$prefix}form_sm + span{
		width: 16px;
		height: 16px;
	}
	.#{$prefix}form_lg & + span,
	&.#{$prefix}form_lg + span{
		width: 22px;
		height: 22px;
	}
}

.#{$prefix}form_input[type='range']{
	&.#{$prefix}form_input.#{$prefix}form_input{
		border: none;
		background-color: transparent;
		padding: 0;
		height: 18px;
	}
	.#{$prefix}form_sm &,
	&.#{$prefix}form_sm{
		height: 16px;
	}
	.#{$prefix}form_lg &,
	&.#{$prefix}form_lg{
		height: 22px;
	}
	&.#{$prefix}form_input.#{$prefix}form_input[disabled]{
		background-color: transparent;
	}
	&:focus{
		outline: none;
	}

	&::-webkit-slider-runnable-track{
		height: 4px;
		cursor: pointer;
	}
	&::-webkit-slider-thumb{
		-webkit-appearance: none;
		width: 18px;
		height: 18px;
		margin-top: -8px;
		border-radius: 50%;
		cursor: pointer;
	}
	&[disabled]::-webkit-slider-runnable-track{
		cursor: not-allowed;
	}
	&[disabled]::-webkit-slider-thumb{
		cursor: not-allowed;
	}
	.#{$prefix}form_sm &::-webkit-slider-thumb{
		width: 16px;
		height: 16px;
		margin-top: -7px;
	}
	&.#{$prefix}form_sm::-webkit-slider-thumb{
		width: 16px;
		height: 16px;
		margin-top: -7px;
	}
	.#{$prefix}form_lg &::-webkit-slider-thumb{
		width: 16px;
		height: 16px;
		margin-top: -7px;
	}
	&.#{$prefix}form_lg::-webkit-slider-thumb{
		width: 22px;
		height: 22px;
		margin-top: -10px;
	}

	&::-moz-range-track{
		height: 2px;
		cursor: pointer;
	}
	&::-moz-range-thumb{
		width: 18px;
		height: 18px;
		margin-top: -8px;
		border-radius: 50%;
		cursor: pointer;
	}
	&[disabled]::-moz-range-track{
		cursor: not-allowed;
	}
	&[disabled]::-moz-range-thumb{
		cursor: not-allowed;
	}
	.#{$prefix}form_sm &::-moz-range-thumb{
		width: 16px;
		height: 16px;
		margin-top: -7px;
	}
	&.#{$prefix}form_sm::-moz-range-thumb{
		width: 16px;
		height: 16px;
		margin-top: -7px;
	}
	.#{$prefix}form_lg &::-moz-range-thumb{
		width: 16px;
		height: 16px;
		margin-top: -7px;
	}
	&.#{$prefix}form_lg::-moz-range-thumb{
		width: 22px;
		height: 22px;
		margin-top: -10px;
	}

	&::-ms-track{
		cursor: pointer;
		height: 4px;
		background: transparent;
		border-color: transparent;
		color: transparent;
	}
	&::-ms-thumb{
		cursor: pointer;
		width: 16px;
		height: 16px;
		border-radius: 50%;
	}
}

.#{$prefix}form_input[type='checkbox']{
	&:checked + span:after{
		box-sizing: border-box;
		top: 26%;
		left: 23%;
		width: 56%;
		height: 32%;
		border-left: 2px solid;
		border-bottom: 2px solid;
		transform: rotate(-45deg);
	}
}

.#{$prefix}form_input[type="radio"]{
	& + span{
		border-radius: 50%;
	}
	&:checked + span:after{
		box-sizing: border-box;
		top: 50%;
		left: 50%;
		width: 1px;
		height: 1px;
		margin-left: -4px;
		margin-top: -4px;
		border-radius: 50%;
		border: 4px solid;
	}
}

.#{$prefix}form_addon{
	box-sizing: border-box;
	height: 34px;
	line-height: 34px;
	padding: 0 8px;
	font-size: 14px;
}

.#{$prefix}form_group{
	display: flex;
	& > .#{$prefix}form_input{
		border-radius: 0px;
		flex: 1;
	}
	& > [class*="#{$prefix}form_"]:not(:first-child):not(:focus){
		border-left-width: 0;
	}
	& > *:first-child{
		border-radius: 3px 0 0 3px;
	}
	& > *:last-child{
		border-radius: 0 3px 3px 0;
	}
}

:root:root .#{$prefix}form_input:focus{
	outline: 0;
	border-color: currentColor;
}

.#{$prefix}form_sm .#{$prefix}form_addon,
.#{$prefix}form_sm .#{$prefix}form_input,
.#{$prefix}form_sm.#{$prefix}form_addon,
.#{$prefix}form_sm.#{$prefix}form_input{font-size: 13px;padding: 0px 7px;line-height: 26px;height: 26px;}

//.#{$prefix}form_md .#{$prefix}form_addon,
//.#{$prefix}form_md .#{$prefix}form_input,
//.#{$prefix}form_md.#{$prefix}form_addon,
//.#{$prefix}form_md.#{$prefix}form_input{font-size: 13px;padding: 0px 8px;line-height: 34px;height: 34px;}

.#{$prefix}form_lg .#{$prefix}form_addon,
.#{$prefix}form_lg .#{$prefix}form_input,
.#{$prefix}form_lg.#{$prefix}form_addon,
.#{$prefix}form_lg.#{$prefix}form_input{font-size: 15px;padding: 0px 9px;line-height: 42px;height: 42px;}

@mixin make_form($name, $color_text, $color_border, $color_bg){

	.#{$prefix}form#{$name} .#{$prefix}form_addon,
	.#{$prefix}form#{$name}.#{$prefix}form_addon{
		border: 1px solid $color_border;
		color: $color_text;
		background-color: change_lightness($color_bg, 5);
	}

	.#{$prefix}form#{$name} .#{$prefix}form_input::placeholder{
		color: rgba($color_text, 0.3);
	}

	.#{$prefix}form#{$name} .#{$prefix}form_input,
	.#{$prefix}form#{$name}.#{$prefix}form_input,
	.#{$prefix}form#{$name} .#{$prefix}form_input[type="checkbox"] + span,
	.#{$prefix}form#{$name}.#{$prefix}form_input[type="checkbox"] + span,
	.#{$prefix}form#{$name} .#{$prefix}form_input[type="radio"] + span,
	.#{$prefix}form#{$name}.#{$prefix}form_input[type="radio"] + span{
		border: 1px solid $color_border;
		color: $color_text;
		background-color: $color_bg;
	}

	.#{$prefix}form#{$name} select.#{$prefix}form_input{
		background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCA3IDUiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkOyI+PHBhdGggZD0iTTYuMzUyLDAuNzY5bC0yLjk3NywzLjMzOWwtMi45NzcsLTMuMzM5IiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAwO3N0cm9rZS13aWR0aDoxcHg7Ii8+PC9zdmc+');
	}

	.#{$prefix}form#{$name} .#{$prefix}form_input[disabled],
	.#{$prefix}form#{$name}.#{$prefix}form_input[disabled],
	.#{$prefix}form#{$name} .#{$prefix}form_input[readonly],
	.#{$prefix}form#{$name}.#{$prefix}form_input[readonly],
	.#{$prefix}form#{$name} .#{$prefix}form_input[disabled][type="checkbox"]+span,
	.#{$prefix}form#{$name}.#{$prefix}form_input[disabled][type="checkbox"]+span,
	.#{$prefix}form#{$name} .#{$prefix}form_input[readonly][type="checkbox"]+span,
	.#{$prefix}form#{$name}.#{$prefix}form_input[readonly][type="checkbox"]+span,
	.#{$prefix}form#{$name} .#{$prefix}form_input[disabled][type="radio"]+span,
	.#{$prefix}form#{$name}.#{$prefix}form_input[disabled][type="radio"]+span,
	.#{$prefix}form#{$name} .#{$prefix}form_input[readonly][type="radio"]+span,
	.#{$prefix}form#{$name}.#{$prefix}form_input[readonly][type="radio"]+span{
		cursor: not-allowed;
		background-color: change_lightness($color_bg, 10);
		color: rgba($color_text, 0.6);
	}



	.#{$prefix}form#{$name} .#{$prefix}form_input[type='range'],
	.#{$prefix}form#{$name}.#{$prefix}form_input[type='range']{
		&::-webkit-slider-runnable-track{
			border: 1px solid $color_border;
			background: $color_bg;
		}
		&::-webkit-slider-thumb{
			border: 1px solid $color_border;
			background: $color_bg;
		}
		&:focus::-webkit-slider-thumb{
			border: 1px solid $color_text;
		}
		&[disabled]::-webkit-slider-runnable-track{
			background: rgba($color_border, 0.6);
		}
		&[disabled]::-webkit-slider-thumb{
			background: rgba($color_border, 0.6);
		}
		&::-moz-range-track{
			border: 1px solid $color_border;
			background: $color_bg;
		}
		&::-moz-range-thumb{
			border: 1px solid $color_border;
			background: $color_bg;
		}
		&:focus::-moz-range-thumb{
			border: 1px solid $color_text;
		}
		&[disabled]::-moz-range-track{
			background: rgba($color_border, 0.6);
		}
		&[disabled]::-moz-range-thumb{
			background: rgba($color_border, 0.6);
		}
		&::-ms-fill-lower{
			border: 1px solid $color_border;
			background: $color_bg;
		}
		&::-ms-fill-upper{
			border: 1px solid $color_border;
			background: $color_bg;
		}
		&::-ms-thumb{
			border: 1px solid $color_border;
			background: $color_bg;
		}
		&:focus::-ms-thumb{
			border: 1px solid $color_border;
			background: $color_bg;
		}
		&[disabled]::-ms-fill-lower{
			background: rgba($color_border, 0.6);
		}
		&[disabled]::-ms-fill-upper{
			background: rgba($color_border, 0.6);
		}
		&[disabled]::-ms-thumb{
			background: rgba($color_border, 0.6);
		}
	}
	
	
	//.#{$prefix}form_input.#{$prefix}form#{$name}:focus,
	//.#{$prefix}form_input.#{$prefix}form#{$name}:focus,
	//.#{$prefix}form_input.#{$prefix}form#{$name}[type="checkbox"]:focus+*,
	//.#{$prefix}form_input.#{$prefix}form#{$name}[type="checkbox"]:focus+*,
	//.#{$prefix}form_input.#{$prefix}form#{$name}[type="radio"]:focus+*,
	//.#{$prefix}form_input.#{$prefix}form#{$name}[type="radio"]:focus+*{
	//	outline: 0;
	//	background-color: change_lightness($color_bg, 1);
	//}

}

/*========================================
         Table
========================================*/
[class*="#{$prefix}table"]{
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	empty-cells: show;
	caption{
		font-size: 85%;
		padding: 1em 0;
		text-align: center;
	}
	tr>*{
		padding: 0.8em 0em 0.8em 1.1em;
		overflow: visible;
	}
}
@mixin make_table($name, $th_color, $th_bgcolor, $td_bgcolor, $radius) {
	table.#{$prefix}table#{$name}{
		border-radius: $radius;
		& > *:first-child  > tr:first-child > *:first-child{
			border-radius: $radius 0 0 0;
		}
		& > *:first-child > tr:first-child > *:last-child{
			border-radius: 0 $radius 0 0;
		}
		& > *:last-child:not(caption) > tr:last-child > *:first-child{
			border-radius: 0 0 0 $radius;
		}
		& > *:last-child:not(caption) > tr:last-child > *:last-child{
			border-radius: 0 0 $radius 0;
		}
		tr:nth-child(2n+1){
			background: $td_bgcolor;
		}
		th{
			color: $th_color;
			background-color: $th_bgcolor;
		}
	}
}

/*========================================
         Loader
========================================*/
[class*="#{$prefix}loader"]{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	font-size: 12px;
	&:before{
		display: block;
		content: ' ';
		width: 40px;
		height: 40px;
		border-radius: 50%;
		animation: loader .6s linear;
		animation-iteration-count: infinite;
	}
	&:after{
		display: block;
		margin-top: 7px;
	}
}
body > [class*="#{$prefix}loader"]{
	position: fixed;
}
@mixin make_loader($name, $color_circle, $color_bg, $opacity ,$text) {
	.#{$prefix}loader#{$name}{
		background: rgba($color_bg, $opacity);
		color: $color_circle;
	}
	.#{$prefix}loader#{$name}:before{
		border: 2px solid rgba($color_circle, 0.3);
		border-bottom-color: $color_circle;
	}
	.#{$prefix}loader#{$name}:after{
		content: $text;
	}
}
@keyframes loader{
	from{
		transform:rotate(0deg);
	}
	to{
		transform:rotate(360deg)
	}
}

/*########################################
         USE
########################################*/

//button
//@include make_button('_1', #fff, #007aff);
@include make_button('_1', #fff, #07e4c1);
@include make_button('_2', #fff, #333);
@include make_button('_3', #fff, #ff9500);
@include make_button('_4', #fff, #eb1148);
@include make_button('_5', #fff, #bbb);
@include make_button('_6', #333, #fff);

//form
@include make_form('_light', #666, #ddd, #fff);

//table
@include make_table('_light', #fff, #546E7A, #eee, 4px);
@include make_table('_dark',  #bbb , #f2f2f2, #999, 4px);

//loader
@include make_loader('', #fff, #000, 0.8, 'Loading');