@import '../variables.less';
@import '../mixins.less';

#citizen-pref {
	&-toggle {
		box-sizing: content-box;
		border: 0;
		appearance: none;

		&:after {
			display: block;
			width: inherit;
			height: inherit;
			background-position: center;
			background-repeat: no-repeat;
			content: '';
			opacity: var( --opacity-icon-base );
			transition: @transition-opacity-quick, @transition-transform-quick;
		}

		&:active:after {
			opacity: var( --opacity-icon-base--active ) !important;
		}
	}

	&-header {
		padding: 20px var( --padding-page ) 0;

		h3 {
			margin: 0;
			font-size: @ui-menu-header;
		}
	}

	// TODO: unify the dropdown menu style somewhere
	&-panel {
		position: absolute;
		top: var( --height-header );
		right: var( --padding-page );
		left: var( --padding-page );
		border: 1px solid var( --border-color-base--lighter );
		background: var( --background-color-dp-08 );
		border-radius: var( --border-radius--medium );
		.boxshadow(4);

		fieldset {
			padding: 10px var( --padding-page );
			border: 0;
			margin: 0;
			appearance: none;
			font-size: @ui-menu-text;
		}

		input {
			width: 100%;
		}
	}

	&-theme {
		&-option {
			&-light {
				background: @background-color-dp-00;
				color: @color-base;
			}

			&-dark {
				background: @dark-background-color-dp-00;
				color: @dark-color-base;
			}
		}

		fieldset {
			display: flex;
			width: 100%;
			padding: 0;
			margin: 0 -4px;
		}

		// Let label be the radio button
		input {
			display: none;

			&:checked {
				+ label {
					border-color: var( --color-primary );
				}
			}
		}
	}

	&-resetbutton {
		width: 100%;
		padding: 10px 20px;
		border: 0;
		margin-top: 10px;
		appearance: none;
		background: var( --color-destructive );
		border-radius: 0 0 var( --border-radius--medium ) var( --border-radius--medium );
		color: #fff;
		cursor: pointer;
		font-family: inherit;
		font-size: @ui-menu-text;
		font-weight: 450;

		&:hover {
			background: var( --color-destructive--hover );
		}

		&:active {
			background: var( --color-destructive--active );
		}
	}
}

.citizen-pref {
	&-panel {
		opacity: 0;
		pointer-events: none;
		transition: @transition-opacity-quick;
		visibility: hidden;

		&--active {
			opacity: 1;
			pointer-events: auto;
			visibility: visible;
		}
	}

	&-item {
		display: flex;
		flex-wrap: wrap;

		&__label {
			display: flex;
			width: 100%;
			justify-content: space-between;
			padding: 4px 0;
			color: var( --color-base--subtle );
			letter-spacing: 0.75px;
		}
	}

	&-theme {
		&-option {
			flex-grow: 1;
			padding: 10px 20px;
			border: 2px solid var( --border-color-base );
			margin: 4px;
			border-radius: var( --border-radius--medium );
			cursor: pointer;
			font-weight: 500;
			text-align: center;
			.boxshadow( 2 );

			&:hover {
				border-color: var( --color-primary--hover );
				.boxshadow( 3 );
			}

			&:active {
				border-color: var( --color-primary--active );
				.boxshadow( 1 );
			}
		}
	}
}

.skin-citizen-dark {
	#citizen-pref-toggle:after {
		filter: invert( 1 ) hue-rotate( 180deg );
	}
}

@media ( min-width: @width-breakpoint-tablet ) {
	#citizen-pref {
		position: relative;

		&-panel {
			right: 0;
			left: unset;
			min-width: 250px;
		}
	}
}

@media ( hover: hover ) {
	#citizen-pref:hover #citizen-pref-toggle:hover:after {
		opacity: var( --opacity-icon-base--hover );
		transform: rotate3d( 0, 0, 1, 90deg );
	}
}