@import "../sass-commons/media-queries";

.setting {
	width: 100%;
	margin: 1rem 0;

	[title]:not(.btn) {
		cursor: help;
	}

	--hue: 100;

	&__content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		position: relative;

		@include small-screen {
			&:not(#{&}--small) {
				flex-direction: column;
				align-items: flex-start;
			}
		}
	}

	&__label {
		flex-grow: 1;
		justify-content: flex-start;

		@include small-screen {
			margin-bottom: 1rem;
		}

		& >:first-child {
			margin-top: 2px;
		}
	}

	&__value-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;

		@include small-screen {
			width: 100%;
		}
	}

	&__value {
		@include value;

		margin: 0 1rem;
		min-width: 6rem;
		box-shadow: none;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;

		&--colored {
			color: hsl(var(--hue) 90% var(--colored-value--light));
			box-shadow: $button-shadow;
		}

		@include small-screen {
			margin: 0;
		}
	}

	&.reset {
		padding-bottom: 1rem;
		max-width: 100%;
		display: flex;

		@include small-screen {
			flex-direction: column;

			.btn {
				margin-bottom: .5rem;
				margin-right: 0;
			}
		}
	}

	&__status-message {
		--summary-offset: -2px;
		--padding-vertical: 1rem;

		display: flex;
		align-items: center;
		opacity: 0;
		visibility: hidden;
		padding: 0 var(--padding-vertical);
		border-radius: 3px;
		transition: all 500ms ease;
		transform: scaleY(0);
		max-width: 100%;
		max-height: 0;

		>svg {
			margin-right: .5em;
		}

		summary {
		  display: flex;
		  align-items: center;
	
			.label {
				display: inline-flex;
				align-items: center;
				transform: translateY(var(--summary-offset));
				
				svg {
					margin-right: .5em;
				}
			}
		}

		&.success,
		&.error,
		&.warning,
		&.info {
			padding: calc(1rem - var(--summary-offset)) var(--padding-vertical) calc(1rem + 2px) var(--padding-vertical);
			margin: 1rem 0;
			opacity: 1;
			visibility: visible;
			color: #FFF;
			transform: scaleY(100%);
			max-height: 6rem;
		}

		&.success {
			background-color: var(--color--success);
		}

		&.info {
			background-color: var(--color--info);
		}

		&.warning {
			background-color: var(--color--warning);
		}

		&.error {
			background-color: var(--color--error);

			--summary-offset: 4px;

			.details {
				margin: 1rem 0;
				font-family: monospace;
			}
		}

		&:not(.error) {
			// TODO: more general: if has no details
			summary::marker {
				content: "";
			}
		}
	}

	input[type="range"] {
		width: $range-width;
	}
}