// Spotify settings
.x-settings-container {
	max-width: unset;
}

.x-toggle-indicatorWrapper {
	border-radius: var(--button-radius);
}

// Comfy settings
#main.Settings-Open~generic-modal .GenericModal__overlay {
	// Failsafe incase spotify's variables are not present
	--background-tinted-base: rgba(var(--spice-rgb-selected-row), 0.07);
	--background-tinted-highlight: rgba(var(--spice-rgb-selected-row), 0.1);

	// Header Section Styling
	.main-trackCreditsModal-header {
		padding: 12px 12px 12px 16px;

		.main-type-alto {
			font-size: 25px;
		}

		.main-trackCreditsModal-closeBtn {
			background-color: var(--background-tinted-base);
			height: 34px;
			cursor: pointer;

			&:hover {
				transform: scale(1.04) !important;
				color: var(--spice-text);
			}

			&:focus {
				transform: scale(1);
			}

			&:active {
				transform: scale(0.98) !important;
				color: var(--spice-text);
			}

			&:first-of-type {
				margin-left: auto;
			}

			&:not(:last-of-type) {
				margin-right: 8px;
			}

			&:last-of-type {
				svg {
					scale: 0.8;
				}
			}
		}
	}

	// Scrollbars And Modal Sizing
	.main-embedWidgetGenerator-container {
		max-height: 75vh !important;
		width: 550px !important;
	}

	.main-trackCreditsModal-mainSection {
		padding: 0px 16px 0;
		scrollbar-width: thin;
		min-height: calc(100% - 60px);

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			width: calc(100% - 12px);
			left: 0;
			height: 25px;
			background: linear-gradient(to bottom, transparent, rgba(var(--spice-rgb-player), 0.5));
			pointer-events: none;
			border-radius: 8px;
			z-index: 0;
			border-bottom-right-radius: 0;
		}
	}

	.GenericModal ::-webkit-scrollbar,
	.main-trackCreditsModal-mainSection ::-webkit-scrollbar,
	.main-trackCreditsModal-originalCredits ::-webkit-scrollbar {
		width: 8px !important;
	}

	.GenericModal ::-webkit-scrollbar-thumb,
	.main-trackCreditsModal-mainSection ::-webkit-scrollbar-thumb,
	.main-trackCreditsModal-originalCredits ::-webkit-scrollbar-thumb {
		border-radius: 1em !important;
	}

	.GenericModal {
		border-radius: 10px;
	}
}

// Main Section Styling
.comfy-settings {

	// Carousel Styling
	.search-searchCategory-SearchCategory {
		background: var(--spice-player);
		grid-column: 1 / -1;
		height: 48px;
		padding-top: 7px;
		position: sticky;
		top: 0px;
		z-index: 1;

		& {
			height: unset;
			padding-bottom: 12px;
			padding-top: 12px;
			top: 0;
		}

		.search-searchCategory-wrapper {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			overflow: hidden;
			width: 100%;
			padding-inline: 0px;

			.search-searchCategory-contentArea {

				&.search-searchCategory-showLeftButton .search-searchCategory-categoryGrid {
					-webkit-mask-image: linear-gradient(90deg, transparent, var(--spice-sidebar) 120px);
					mask-image: linear-gradient(90deg, transparent, var(--spice-sidebar) 120px);
				}

				&.search-searchCategory-showRightButton .search-searchCategory-categoryGrid {
					-webkit-mask-image: linear-gradient(90deg, var(--spice-sidebar) calc(100% - 120px), transparent);
					mask-image: linear-gradient(90deg, var(--spice-sidebar) calc(100% - 120px), transparent);
				}

				&.search-searchCategory-showLeftButton.search-searchCategory-showRightButton .search-searchCategory-categoryGrid {
					-webkit-mask-image: linear-gradient(90deg, transparent, var(--spice-sidebar) 120px, var(--spice-sidebar) calc(100% - 120px), transparent);
					mask-image: linear-gradient(90deg, transparent, var(--spice-sidebar) 120px, var(--spice-sidebar) calc(100% - 120px), transparent);
				}

				.search-searchCategory-categoryGrid {
					overflow-y: hidden;

					&Item {
						cursor: pointer;
						padding: 2px;

						button::after {
							border: none !important;
						}

						&:active,
						&:focus,
						&:hover {
							text-decoration: none;
						}

						&:focus-visible {
							outline: none;
							text-decoration: none;

							&>* {
								outline: 5px auto #3673d4;
							}
						}

						&>* {
							margin-inline-end: 8px;
							margin-block-end: 0 !important;
						}
					}
				}
			}
		}

		.search-searchCategory-showRightButton .search-searchCategory-carouselButtonRight,
		.search-searchCategory-showRightButton:hover .search-searchCategory-carouselButtonRight,
		.search-searchCategory-showLeftButton .search-searchCategory-carouselButtonLeft,
		.search-searchCategory-showLeftButton:hover .search-searchCategory-carouselButtonLeft {
			cursor: pointer;
			opacity: 1;
			pointer-events: auto;
		}
	}


	// Contents Styling
	.setting-header {
		text-align: center;
		padding: 5px 0;
	}

	.setting-card {
		background-color: var(--background-tinted-base);
		border-radius: 10px;
		margin: 8px 0;

		.setting-container {
			padding: 12px 16px;
			display: flex;
			flex-direction: column;

			.setting-item {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.setting-title {
					padding-right: 15px;
					font-weight: 600;
				}

				.x-settings-tooltip {
					cursor: help !important;

					.x-settings-tooltipIconWrapper {
						padding: 0px 8px 0px 8px !important;

						svg {
							fill: var(--spice-subtext);
							transition: fill 0.2s;
						}

						&:focus-within,
						&:hover {
							svg {
								fill: var(--spice-text) !important;
							}
						}
					}
				}
			}

			.setting-action,
			.setting-title {
				display: flex;
				align-items: center;
				padding: 8px 0;
			}
		}

		.setting-description {
			font-size: 0.9rem;
			color: var(--spice-subtext);
		}

		.setting-description-spacer {
			height: 0.9rem;
		}

		.setting-action {
			text-align: right;

			.x-toggle-wrapper {
				cursor: pointer;

				.x-toggle-input {
					width: 100%;
				}

				.x-toggle-indicatorWrapper {
					transition: background-color 0.2s;
					--spice-button-disabled: var(--background-tinted-base);
				}

				input:hover:not([disabled], :active)~.x-toggle-indicatorWrapper {
					background-color: var(--background-tinted-highlight);
				}

				input:checked:hover:not([disabled], :active)~.x-toggle-indicatorWrapper {
					background-color: var(--spice-button-active);
				}
			}

			button.switch {
				border: 0px;
				background-color: var(--background-tinted-base);
				cursor: pointer;
				display: flex;
				padding: 8px;
				margin-inline-end: 12px;

				&:hover {
					transform: scale(1.04);
					color: var(--spice-text);
				}

				&:active {
					transform: scale(0.98);
					color: var(--spice-text);
				}
			}

			input {
				padding-inline: 10px;
				text-align: center;
				background-color: var(--background-tinted-base);
				color: var(--spice-text);
				border: none;
				height: 32px;
				width: 120px;

				&::placeholder {
					color: rgba(var(--spice-rgb-text), 0.3);
				}

				&[type="number"] {
					width: 50px;
					transition: width 0.2s;

					&::-webkit-inner-spin-button,
					&::-webkit-outer-spin-button {
						display: none;
					}

					&:hover {
						width: 60px;

						&::-webkit-inner-spin-button,
						&::-webkit-outer-spin-button {
							display: block;
						}
					}
				}

				&[type="color"] {
					width: 32px;
					padding: 3px;
					transition: all 0.2s ease;
					cursor: pointer;
					margin-left: 8px;

					&:hover,
					&:focus,
					&:active {
						scale: 1.04;
						background-color: var(--background-tinted-highlight);
					}

					&::-webkit-color-swatch-wrapper {
						padding: 0;
						margin: 0;
					}

					&::-webkit-color-swatch {
						border: none;
						border-radius: var(--button-radius);
					}
				}
			}

			.dropdown-wrapper {
				position: relative;

				&.menu-open {
					.dropdown-button {
						border-bottom-left-radius: 0;
						border-bottom-right-radius: 0;
					}

					.dropdown-arrow {
						border-color: transparent transparent rgba(var(--spice-rgb-text), 0.7);
						border-width: 0 5px 5px;
					}

					.dropdown-menu {
						border-top-left-radius: 0;
						border-top-right-radius: 0;
					}
				}

				.dropdown-button {
					position: relative;
					background-color: var(--background-tinted-base);
					border: 0;
					border-radius: var(--button-radius);
					box-sizing: border-box;
					color: rgba(var(--spice-rgb-text), 0.7);
					cursor: default;
					outline: 0;
					padding: 0 36px 0 16px;
					transition: all 0.2s ease;
					height: 32px;
					cursor: pointer !important;

					&:hover {
						color: var(--spice-rgb-text);
						background-color: var(--background-tinted-highlight);
					}

					.dropdown-selection {
						display: flex;
						align-items: center;
						height: 32px;
					}
				}

				.dropdown-arrow {
					border-color: rgba(var(--spice-rgb-text), 0.7) transparent transparent;
					border-style: solid;
					border-width: 5px 5px 0;
					content: " ";
					display: block;
					height: 0;
					margin-top: -ceil(2.5);
					position: absolute;
					right: 16px;
					top: 14px;
					width: 0;
				}

				.dropdown-menu {
					scrollbar-width: thin;
					background-color: var(--spice-card);
					opacity: 1;
					border: 0;
					border-radius: 8px;
					box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
					box-sizing: border-box;
					margin-top: -1px;
					max-height: 200px;
					overflow-y: auto;
					overflow-x: hidden;
					position: absolute;
					top: 100%;
					width: 100%;
					z-index: 1000;
					-webkit-overflow-scrolling: touch;
				}

				.dropdown-option {
					box-sizing: border-box;
					color: rgba(var(--spice-rgb-text), 0.7);
					background-color: var(--background-tinted-highlight);
					cursor: pointer;
					display: block;
					padding: 8px 10px;
					text-align: center;

					&.selected {
						background-color: rgba(var(--spice-rgb-text), 0.7);
						color: var(--spice-sidebar);
					}

					&:hover {
						background-color: rgb(var(--spice-rgb-text));
						color: var(--spice-sidebar);
					}
				}
			}
		}
	}

	// Subsection Specific Styling
	.setting-subSection {
		&#enabled {
			.setting-card {
				border-radius: 0;
				margin: 0;

				&:first-child {
					border-radius: 10px 10px 0px 0px;
					background-color: var(--spice-sidebar);
					margin-top: 8px;
					transition: 0.2s;

					&:hover {
						background-color: var(--spice-button-disabled);
						transition: background-color 0.2s;
						cursor: pointer;
					}

					.setting-title {
						cursor: pointer !important;
					}
				}

				&:last-child {
					border-radius: 0 0 10px 10px;
					margin-bottom: 8px;
				}
			}
		}

		&#collapsed {
			.setting-card {
				background-color: var(--spice-sidebar);
				transition: background-color 0.2s;
				cursor: pointer;

				&:hover {
					background-color: var(--spice-button-disabled);
				}

				.setting-title {
					cursor: pointer !important;
				}
			}
		}
	}

	// Button and Button Row
	.setting-button-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8px;
	}

	.main-buttons-button {
		background-color: transparent;
		color: var(--spice-button);
		border: 2px solid var(--spice-button) !important;
		margin: 5px 10px;
		border: 2px solid transparent;
		border-radius: 10px;
		cursor: pointer;
		display: inline-block;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 1.76px;
		line-height: 18px;
		padding: 8px 8%;
		text-align: center;
		text-transform: uppercase;
		transition: all 33ms cubic-bezier(0.3, 0, 0, 1);
		white-space: nowrap;
		will-change: transform;

		&:hover {
			transform: scale(1.02);
			filter: brightness(1.2);
		}

		&:active {
			transform: scale(0.98);
			filter: brightness(0.8);
		}
	}

}