/*--------------------------------------------------------------
>>> HOME:
----------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/

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

.satus-section--home .satus-button {
	display: flex;
	flex-direction: column;

	width: calc(100% / 3);
	height: unset;
	margin: 8px 0 0;
	padding: 8px 0;
}

.satus-base:not([improvedtube-home='list'])[page] .satus-section--home .satus-button {
	width: 96px;
}

.satus-section--home .satus-button:focus,
.satus-section--home .satus-button:hover {
	background: transparent;
}

.satus-section--home .satus-button> :nth-child(1) {
	display: flex;

	width: 60px;
	height: 60px;
	margin: 0 0 8px;
	padding: 16px;

	transition: background 500ms 250ms, transform 500ms, box-shadow 525ms;

	color: var(--satus-bubble-foreground);
	border-radius: 50%;
	background: var(--satus-bubble-background);
	box-shadow: var(--satus-bubble-shadow-raised);

	align-items: center;
	justify-content: center;
}

.satus-section--home .satus-button:hover> :nth-child(1) {
	transition: background 250ms 125ms, transform 250ms, box-shadow 275ms, color 400ms;
	transform: translateY(4px) scale(.975);
	color: rgba(255, 255, 255, 1);

	box-shadow: var(--satus-bubble-shadow-unelevated);
}

.satus-section--home .satus-button> :nth-child(2) {
	overflow: hidden;

	width: 100%;
	padding: 0 8px;

	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.satus-section--home svg {
	position: relative;
	top: 1px;
}

.satus-button--player svg {
	top: 1px;
	left: 2px;
}

.satus-base[home-style='list'] .satus-button--general > span:first-child,
.satus-base[home-style='list'] .satus-button--appearance > span:first-child,
.satus-base[home-style='list'] .satus-button--themes > span:first-child,
.satus-base[home-style='list'] .satus-button--player > span:first-child,
.satus-base[home-style='list'] .satus-button--playlist > span:first-child,
.satus-base[home-style='list'] .satus-button--channel > span:first-child,
.satus-base[home-style='list'] .satus-button--shortcuts > span:first-child,
.satus-base[home-style='list'] .satus-button--blocklist > span:first-child,
.satus-base[home-style='list'] .satus-button--analyzer > span:first-child {
	display: block;
	height: 20px;
	width: 20px;
	color: var(--satus-primary);
	margin: 0 14px 0 0;
}

.satus-base[general='true'] .satus-button--general,
.satus-base[appearance='true'] .satus-button--appearance,
.satus-base[themes='true'] .satus-button--themes,
.satus-base[player='true'] .satus-button--player,
.satus-base[playlist='true'] .satus-button--playlist,
.satus-base[channel='true'] .satus-button--channel,
.satus-base[shortcuts='true'] .satus-button--shortcuts,
.satus-base[blocklist='true'] .satus-button--blocklist,
.satus-base[analyzer='true'] .satus-button--analyzer {
	display: none !important;
}


body[tab] {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

body[tab] .satus-base {
	width: 100%;
	height: 100%;
}
