/*--------------------------------------------------------------
>>> APPEARANCE:
----------------------------------------------------------------
# Buttons
# Custom player size
# Hide Detail Button
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# BUTTONS
--------------------------------------------------------------*/

.satus-section--appearance {
	position: relative;

	width: 100%;
	max-width: 900px;
	height: 100%;
	margin: auto;
}

.satus-section--appearance .satus-button {
	position: absolute;

	display: block;

	transition: transform .5s, box-shadow .5s;
	transform: scale(1);
	text-align: center;

	border: 1px solid var(--it-appearance-shadow-color);
	border-radius: 3px;
	background: var(--satus-section-background);
	box-shadow: 0 0 2px 0 rgb(0 0 0 / 0%);
}

.satus-section--appearance .satus-button:hover {
	z-index: 9;

	transition-duration: .25s;
	transform: scale(1.03) translate(-8px, -4px);

	box-shadow: 1px 1px 0 0 var(--main-appearance-shadow, var(--it-appearance-shadow-color)), 2px 2px 0 0 var(--main-appearance-shadow, var(--it-appearance-shadow-color)), 3px 3px 0 0 var(--main-appearance-shadow, var(--it-appearance-shadow-color)), 4px 4px 0 0 var(--main-appearance-shadow, var(--it-appearance-shadow-color)), 5px 6px 4px 0 rgba(0, 0, 0, .1);
}

.satus-section--appearance .satus-button--header {
	top: 16px;
	left: 16px;

	width: calc(100% - 32px);
	height: 40px;
	min-height: auto;
}

.satus-section--appearance .satus-button--header:hover {
	transform: scale(1.03) translate(-9px, -4px);
}

.satus-section--appearance .satus-button--player {
	top: 64px;
	left: 16px;

	width: calc(70% - 32px);
	height: 96px;
	min-height: auto;

	color: #eee;
	border-color: #333;
	background-color: #444;
}

.satus-section--appearance .satus-button--player .label {
	color: #fff;
}

.satus-section--appearance .satus-button--player:hover {
	transform: scale(1.03) translate(-7px, -4px);

	box-shadow: 1px 1px 0 0 #333, 2px 2px 0 0 #333, 3px 3px 0 0 #333, 4px 4px 0 0 #333, 5px 6px 4px 0 rgba(0, 0, 0, .1);
}

.satus-section--appearance .satus-button--details {
	top: 168px;
	left: 16px;

	width: calc(70% - 32px);
	height: 56px;
	min-height: auto;
}

.satus-section--appearance .satus-button--comments {
	top: 232px;
	left: 16px;

	width: calc(70% - 32px);
	height: 80px;
	min-height: auto;
}

.satus-section--appearance .satus-button--footer {
	top: 320px;
	left: 16px;

	width: calc(70% - 32px);
	height: 64px;
	min-height: auto;
}

.satus-section--appearance .satus-button--sidebar {
	top: 64px;
	left: calc(70% - 8px);

	width: calc(30% - 8px);
	height: 160px;
}


/*--------------------------------------------------------------
# CUSTOM PLAYER SIZE
--------------------------------------------------------------*/

.satus-section--custom-player-size {
	position: relative;

	display: flex;
	visibility: hidden;
	overflow: hidden;

	height: 0;
	padding: 0 8px;

	transition: 400ms;

	background: rgba(var(--satus-light), .04);
	box-shadow: inset 0 3px 4px -4px, inset 0 -3px 4px -4px;

	flex-wrap: nowrap;
	align-items: center;
}

.satus-select--player-size[data-value='custom']+.satus-section--custom-player-size {
	visibility: visible;

	height: 68px;
	padding: 16px 8px;
}

.satus-section--custom-player-size>.satus-text-field {
	width: auto;
	min-width: unset;

	text-align: center;

	flex: 1;
}

.satus-section--custom-player-size>span {
	margin: 0 8px;

	content: 'x';
}

 /*--------------------------------------------------------------
HIDE DETAIL BUTTON
--------------------------------------------------------------*/

 /*--------------------------------------------------------------
HIDE LIKE BUTTON
--------------------------------------------------------------*/

[it-hide-like-button=true] #info #top-level-buttons ytd-toggle-button-renderer:nth-child(1),
[it-hide-like-button=true] #info #top-level-buttons-computed ytd-toggle-button-renderer:nth-child(1) {
	display: none;
}

[it-hide-like-button-text=true] #top-level-buttons ytd-toggle-button-renderer:nth-child(1) div.cbox,
[it-hide-like-button-text=true] #top-level-buttons-computed ytd-toggle-button-renderer:nth-child(1) div.cbox {
	display: none;
}

 /*--------------------------------------------------------------
HIDE DISLIKE BUTTON
--------------------------------------------------------------*/

[it-hide-dislike-button-text=true] #top-level-buttons-computed ytd-toggle-button-renderer:nth-child(2) div.cbox,
[it-hide-dislike-button-text=true] #top-level-buttons ytd-toggle-button-renderer:nth-child(2) div.cbox {
	display: none;
}

[it-hide-dislike-button-text=true] #top-level-buttons ytd-toggle-button-renderer:nth-child(2) div.cbox,
[it-hide-dislike-button-text=true] #top-level-buttons-computed ytd-toggle-button-renderer:nth-child(2) div.cbox {
	display: none;
}

/*--------------------------------------------------------------
HIDE SHARE BUTTON
--------------------------------------------------------------*/

html[it-hide-share-button=true] #top-level-buttons ytd-button-renderer#Share-button,
html[it-hide-share-button=true] #top-level-buttons-computed ytd-button-renderer#Share-button {
	display: none;
}

html[it-hide-share-button-text=true] #top-level-buttons ytd-button-renderer#Share-button div.cbox,
html[it-hide-share-button-text=true] #top-level-buttons-computed ytd-button-renderer#Share-button div.cbox {
	display: none;
}

/*--------------------------------------------------------------
HIDE DOWNLOAD BUTTON
--------------------------------------------------------------*/

html[it-hide-download-button=true] #top-level-buttons ytd-download-button-renderer,
html[it-hide-download-button=true] #top-level-buttons-computed ytd-download-button-renderer {
	display: none;
}

html[it-hide-download-button-text=true] #top-level-buttons ytd-download-button-renderer div.cbox ,
html[it-hide-download-button-text=true] #top-level-buttons-computed ytd-download-button-renderer div.cbox {
	display: none;
}

/*--------------------------------------------------------------
HIDE THANKS BUTTON
--------------------------------------------------------------*/

html[it-hide-thanks-button=true] #top-level-buttons ytd-button-renderer#Thanks-button,
html[it-hide-thanks-button=true] #top-level-buttons-computed ytd-button-renderer#Thanks-button {
	display: none;
}

html[it-hide-thanks-button-text=true] #top-level-buttons ytd-button-renderer#Thanks-button div.cbox,
html[it-hide-thanks-button-text=true] #top-level-buttons-computed ytd-button-renderer#Thanks-button div.cbox {
	display: none;
}

/*--------------------------------------------------------------
HIDE CLIP BUTTON
--------------------------------------------------------------*/

html[it-hide-clip-button=true] #top-level-buttons ytd-button-renderer#Clip-button,
html[it-hide-clip-button=true] #top-level-buttons-computed ytd-button-renderer#Clip-button {
	display: none;
}

html[it-hide-clip-button-text=true] #top-level-buttons ytd-button-renderer#Clip-button div.cbox,
html[it-hide-clip-button-text=true] #top-level-buttons-computed ytd-button-renderer#Clip-button div.cbox {
	display: none;
}

/*--------------------------------------------------------------
HIDE SAVE BUTTON
--------------------------------------------------------------*/

html[it-hide-save-button=true] #top-level-buttons ytd-button-renderer#Save-button,
html[it-hide-save-button=true] #top-level-buttons-computed ytd-button-renderer#Save-button {
	display: none;
}

html[it-hide-save-button-text=true] #top-level-buttons ytd-button-renderer#Save-button div.cbox,
html[it-hide-save-button-text=true] #top-level-buttons-computed ytd-button-renderer#Save-button div.cbox {
	display: none;
}

/*--------------------------------------------------------------
REPORT REPORT BUTTON
--------------------------------------------------------------*/

html[it-hide-report-button=true] #top-level-buttons ytd-button-renderer#Report-button,
html[it-hide-report-button=true] #top-level-buttons-computed ytd-button-renderer#Report-button {
	display: none;
}


/*--------------------------------------------------------------
HIDE MORE BUTTON
--------------------------------------------------------------*/

html[it-hide-more-button=true] #menu yt-button-shape#button-shape {
	display: none;
}

html[it-hide-more-button=true] body{
	background-color: aqua;
}