@use '../assets';

#app-mount {
	.backdrop-2ByYRN,
	.backdropWithLayer-3_uhz4 {
		background: var(--backdrop) !important;
		opacity: 1 !important;
	}
	.modal-3Crloo {
		transform: none !important;
	}
	.sizeMedium-2Q3COE,
	.sizeSmall-syGkV0,
	.sizeLarge-D4HafV,
	.small-23Atuv:not(.popout-3gby1q, .root-g14mjS) {
		min-width: 400px;
		max-width: 600px;
		max-height: 88vh;
		width: unset;
		&.small-23Atuv,
		&.sizeSmall-syGkV0 {
			max-width: 400px;
		}
	}
	.modal-2RrUKJ,
	.root-g14mjS:not(.popout-3gby1q) {
		background-color: var(--background);
		border-radius: var(--border-radius);
		box-shadow: var(--elevation-2);
		border: none;
		opacity: 1 !important;
		transform: none !important;
		min-height: unset;
		animation: modal 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
		.header-2w6VV8,
		.header-1zd7se {
			padding: var(--spacing-double);
			border-bottom: 1px solid var(--base-border);
			box-shadow: none;
			box-sizing: border-box;
			overflow: hidden;
			text-align: left;
			align-items: flex-start;
			margin: 0;
			& > .flexChild-3PzYmX:first-child {
				margin: 0;
			}
			&.headerContainer-XvrQPt {
				height: auto;
				& + .content-2hZxGK[style] {
					padding: 0;
				}
			}
			.h4-1_f8j1,
			.title-2dsDLn,
			.colorStandard-21JIj7 {
				font-size: var(--font-size-md);
				color: var(--text-normal);
				font-weight: var(--font-weight-semibold);
				text-transform: none;
				line-height: normal;
				letter-spacing: normal;
			}
			.modalTitle-nz51Yi {
				margin: 0;
			}
			.modalTitle-3_QDTE {
				font-weight: 600;
				font-size: 20px;
				line-height: 24px;
			}
			.breadcrumbs-2uP7wU {
				position: absolute;
				top: 0;
				left: 0;
				width: calc(100% - (var(--spacing) * 4) - 6px);
				height: 100%;
				padding-left: var(--spacing-double);
				background: var(--background);
				z-index: 0;
				box-sizing: border-box;
				.breadcrumbWrapper-3rpYiO .breadcrumb-17S_pr {
					white-space: nowrap;
					font-size: var(--font-size);
					font-weight: var(--font-weight-semibold);
					color: var(--text-normal);
					opacity: 0.5;
					&.activeBreadcrumb-2xVic0 {
						opacity: 1;
					}
				}
			}
			.guildName-1kreI8 {
				color: var(--text-muted);
				font-size: var(--font-size-sm);
				font-weight: var(--font-weight-normal);
				line-height: normal;
			}
			.close-1mLglB {
				width: 16px;
				height: 16px;
				margin: 0;
				padding: 0;
				color: var(--text-muted);
				opacity: 1;
				z-index: 1;
				transition: none;
				&:hover {
					color: var(--text-normal);
				}
				.contents-3ca1mk {
					width: 16px;
					height: 16px;
				}
				svg {
					width: 16px;
					height: 16px;
					path {
						d: path(assets.$path_close);
						transform: scale(1.6) translateX(1.5px);
					}
				}
			}
		}
		.divider-3APUjw {
			display: none;
		}
		.content-2hZxGK {
			border-radius: 0;
			padding: var(--spacing-double);
			padding-right: var(--spacing-double) !important;
			.divider-3LgWDL {
				display: none;
			}
			.body-_jWL8l {
				text-align: left;
			}
			.title-1itth0 {
				max-height: 50px;
				box-sizing: border-box;
				padding: var(--spacing-double);
				text-align: left;
				border-bottom: 1px solid var(--base-border);
				color: var(--text-normal);
				font-size: var(--font-size-md);
				font-weight: var(--font-weight-semibold);
				text-transform: none;
				margin: 0;
				position: relative;
				line-height: normal;
				display: flex;
				align-items: center;
				top: calc(var(--spacing-double) * -1);
				left: calc(var(--spacing-double) * -1);
				width: calc(100% + (var(--spacing-double) * 2));
			}
		}
		.inner-ZyuQk0 {
			padding: var(--spacing-double) var(--spacing-double) 0;
		}
		.colorStandard-21JIj7 {
			font-size: var(--font-size);
		}
		.largeSpacing-22TLsQ {
			margin-bottom: var(--spacing-double);
		}
		.divider-3LgWDL {
			border-top-color: var(--base-border);
		}
		.content-1G6Z6z {
			padding-bottom: 0;
		}
		.titleDefault-3GR-DE {
			margin-left: var(--spacing-half);
		}
		.description-30xx7u,
		.description-30xx7u,
		.markdown-19oyJN {
			font-size: var(--font-size);
			&.description-30xx7u {
				color: var(--text-muted);
			}
		}
		.markdown-19oyJNm,
		.permissionsTitle-3JkXB8 {
			color: var(--text-normal);
			font-weight: var(--font-weight-normal);
			line-height: normal;
		}
		.permissionsTitle-3JkXB8 {
			margin-bottom: var(--spacing-half) !important;
			margin-top: var(--spacing);
		}
		h5[style*='margin-bottom: 4px;'] {
			margin-bottom: var(--spacing-third) !important;
		}
		.marginBottom20-315RVT {
			margin-bottom: var(--spacing);
		}
		.switchItem-2hKKKK {
			margin: 0;
			.switchIcon-3IwSZ_ {
				display: none;
			}
			.directionRow-2Iu2A9 {
				align-items: center;
				flex-direction: row-reverse;
				label {
					font-size: var(--font-size);
					font-weight: var(--font-weight-normal);
					color: var(--text-normal);
					cursor: var(--cursor);
				}
				.switch-3wwwcV {
					margin: 0;
				}
			}
		}
		video.spacing-Qvs3Lr {
			width: 100%;
		}
		.cardPrimaryOutline-1ofwVz {
			border-color: var(--base-border);
			background: var(--background-dark);
			padding: var(--spacing-half) 0 var(--spacing-half) var(--spacing);
			border-radius: var(--border-radius);
			.directionRow-2Iu2A9 {
				align-items: center;
				svg {
					width: var(--font-size-xl);
				}
			}
			.weightSemiBold-1WYsXZ {
				font-size: var(--font-size-md);
			}
			.channelNameByline-tP477j {
				font-size: var(--font-size-sm);
			}
			.box-BHImcZ {
				background: var(--background) !important;
				cursor: var(--cursor);
				border: none;
				&[style*='rgb(114, 137, 218)'] {
					background: var(--accent-solid) !important;
					border: none !important;
				}
			}
		}
		.checkboxMute-1erNeD::before {
			content: none;
		}
	}
	.footer-31IekZ {
		background: var(--background);
		box-shadow: none;
		border-top: 1px solid var(--base-border);
		padding: var(--spacing-double);
		.cancelButton-3Xu9aX,
		button:only-child {
			margin: 0;
		}
		button {
			min-width: 120px;
		}
		&.justifyBetween-wAERV6 {
			justify-content: flex-start;
		}
		.lookLink-9FtZy-,
		.cancelButton-27U_rB {
			color: var(--text-normal);
			background: var(--background-light);
			border: 1px solid var(--base-border);
			box-shadow: none !important;
			cursor: var(--cursor);
			&:hover {
				border: 1px solid currentColor;
				.contents-3ca1mk {
					background-image: none;
					text-decoration: none;
				}
			}
			&:focus {
				box-shadow: 0 0 0 1px currentColor !important;
				border: 1px solid currentColor !important;
			}
		}
	}
	.overrideList-1mnGiL {
		padding: 0;
		.header-2BMCBr,
		.overrideHeader-1R6yls {
			color: var(--text-muted);
			font-size: var(--font-size);
			font-weight: var(--font-weight-normal);
		}
		.lighten-_eaPS6 {
			opacity: 1;
		}
		.header-2BMCBr {
			margin-left: 0;
			margin-bottom: var(--spacing);
			font-size: var(--font-size-sm);
			color: var(--text-muted);
			font-weight: var(--font-weight-normal);
			text-transform: none;
			user-select: none;
			&.headerName-3l1jaS {
				color: var(--text-normal);
				font-weight: var(--font-weight-semibold);
			}
			&.headerOption-34DUW8 {
				width: 60px;
				&:last-child {
					padding-right: var(--spacing-half);
				}
			}
		}
	}
}

// Light Mode

html.theme-light {
	#app-mount .footer-31IekZ .lookLink-9FtZy-,
	#app-mount .footer-31IekZ .cancelButton-27U_rB {
		&:hover {
			background: var(--background);
			border: 1px solid var(--secondary-border);
		}
		&:focus {
			box-shadow: 0 0 0 2px rgb(0, 0, 0, 0.05) !important;
			border: 1px solid var(--secondary-border) !important;
		}
	}
}
