@import "fontsampler-custom-selectric.less";
@import "fontsampler-custom-rangeslider.less";

.fontsampler-wrapper {

	&.on-loading {
		> * {
			opacity: 0;
			transition: opacity 0s;
		}
	}

	> * {
		opacity: 1;
		transition: opacity 0.2s ease-in-out;
	}

	.fontsampler-interface {

		.fontsampler-interface-row {
			clear: both;
			position: relative;
			overflow: visible;
			margin: 0 0 1em;
			font-size: smaller;

			&:after {
				clear: both;
				content: '';
				display: block;
				width: 100%;
			}
		}

        button.fontsampler-toggle {
            height: 30px;
            width: 30px;
            padding: 0;
            border-radius: 3px;
            overflow: hidden;
            outline: none;
            opacity: 0.75;
            transition: opacity 0.2s ease-in-out;

            &.fontsampler-toggle-on {
                opacity: 1;
            }

            img {
                font-size: 12px;
                line-height: 10px;
                float: left;
                display: block;
                width: 100%;
            }

            &:hover, &:focus {
            }

        }

		label.fontsampler-slider {
			box-sizing: border-box;
			display: block;
			float: left;
			position: relative;
			padding: 0 5px;
			width: 32%;

			&:first-of-type {
				left: -5px;
			}

			&:last-of-type {
				right: -5px;
			}

			span {
			}
			.slider-label {
				float: left;
				margin-bottom: 0.5em;
			}
			.slider-value {
				float: right;
				margin-bottom: 0.5em;
			}

			input {
				clear: left;
				display: block;
				width: 100%;
			} 
		}

		select,
		.selectric-wide,
		.selectric-small {
			display: block;
			float: left;
		}

		select[name="font-selector"],
		select[name="sample-text"],
		div.font-lister select,
		.selectric-wide {
            left: -5px;
            padding: 0 5px;
            margin-right: 5px;
			width: 32%;
		}
		select[name="alignment"],
		select[name="invert"], 
		.selectric-small {
			width: 10%;
		}


		.fontsampler-multiselect {
			box-sizing: border-box;
			float: left;
			padding-right: 5px;

            &.one-item {
                width: 17/3%;
                > button {
                    width: 100%;
                }
            }

			&.two-items {
                width: 32/3%;
				> button {
					width: 50%;
				}
			}
			&.three-items {
                width: 46/3%;
				> button {
					width: 33%;
				}
			}

			> button {
				background: #fff;
				border: 0;
			    border-bottom: 1px solid #333;
			    font-size: inherit;
			    font-family: inherit;
			    color: #333;
			    font-weight: inherit;
			    height: 30px;
			    line-height: 4px;
			    text-transform: none;
			    border-radius: 0;
			    display: block;
			    float: left;
			    padding: 0 2px;
			    margin: 0;
			    text-align: center;
			    opacity: 0.5;
			    outline: none;

			    img {
			    	display: block;
			    	max-width: 15px;
			    	max-height: 15px;
			    	margin: 0 auto;
			    }
			}

			.fontsampler-multiselect-selected {
				opacity: 1;
			}
		}


		.fontsampler-opentype {
			&.feature-lister__features-empty {
				display: none;
			}

			.fontsampler-opentype-toggle {

			}

			.fontsampler-opentype-features {
				display: none;
				position: absolute;
				right: 0;
				top: 35px;
				text-align: right;
				background: #ffffff;
				height: auto;
				text-align: left;
				padding: 5px;
				width: 100%;
				z-index: 10;

				&.shown {
					display: block;
				}

				button.fontsampler-toggle {
					height: 20px;
					width: 20px;
				}

				fieldset {
					display: block;
					margin: 0;
					border: 0;
					height: auto;
					padding: 10px;

					label {
						float: left;
						width: 50%;
					}
				}
			}
		}
	}

	// the actual container of the type sample
	.fontsampler, .type-tester__content {
	    clear: both;
	    margin-bottom: 20px;
		margin-top: 0.25em;
		transition: all 0.2s ease-out;
		padding: 0.25em 0.15em;

		&:focus {
			outline: none;
		}

		// force single line when single line
		&.fontsampler-is-singleline {
			overflow-x: hidden;
			overflow-y: visible;
			white-space: nowrap;
		}
	}
}