/*#content:has(.dashboard__header) {*/
/*	padding-top: 0;*/
/*}*/
/* >>> replace_has: #content:has(.dashboard__header) */
@media (min-width: 481px) {
	#content .dashboard__header {
		margin-top: -24px;
	}
}
/* <<< replace_has: #content:has(.dashboard__header) */

/* RESET ws-editable default styles */
.motto ws-editable {
	width: initial;
	height: initial;
	overflow: initial;
}
.motto .editable-value {
	display: block;
	position: initial;
	height: initial;
	width: initial;
	transition: unset;
}
.motto .editable-value .view {
	display: block;
	align-items: initial;
	gap: initial;
}
.motto .editable-value .view:hover {
	box-shadow: unset;
}
.motto .editable-value .view > span {
	display: block;
	flex-grow: initial;
	overflow: initial;
	text-overflow: initial;
	white-space: initial;
	width: initial;
	padding: 0;
}
.motto .editable-value:hover .view .options,
.motto .editable-value.errored .view .options {
	display: block;
}
.motto .editable-value:not(.readonly):not(.errored) .view:hover {
	background: unset;
}
.motto .editable-value .view .options {
	display: block;
	padding: 0;
	align-items: unset;
	gap: unset;
}
.motto .editable-value .input {
	height: initial;
	background: unset;
}
.motto .editable-value .input.focus,
.motto .editable-value.errored .input.focus,
.motto .editable-value.errored .input:hover,
.motto .editable-value.errored .view:hover {
	box-shadow: unset;
	padding: 0;
}
.motto .editable-value.errored .view {
	background: unset;
	cursor: text;
}
.motto .editable-value .input input {
	height: initial;
}
/* /RESET ws-editable default styles */

/* HEADER */
.dashboard__header {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.dashboard__date {
	margin: 6px 0;
}
.dashboard__motto {
	margin-bottom: 12px;
}
.dashboard__iceland {
	max-width: 928px;
	margin: 12px 0 24px;
}
/* /HEADER */

/* DAILY OVERVIEW */
.daily-overview {
	display: flex;
	gap: 10px;
}
.daily-overview__date,
.daily-overview__weather {
	font: var(--font-ui-16-title-3-reg);
	color: var(--base-txt-secondary);
}
/* /DAILY OVERVIEW */

/* MOTTO */
.motto {
	--ws-editable-btn-size: 28px;
	padding: 0 calc(var(--ws-editable-btn-size) + 8px);
	box-sizing: border-box;
}
.motto .editable-value {
	text-align: center;
}
.motto .editable-value .view {
	font-size: 0; /* remove unwanted space */
}
.motto .editable-value .view > *,
.motto .editable-value .input {
	font: var(--font-ui-32-title-large-med);
	color: var(--base-txt-primary);
	font-weight: 510;
	vertical-align: middle;
}
.motto .editable-value .view > span {
	display: inline;
	overflow-wrap: anywhere;
}
.motto .editable-value:hover .view > span {
	margin-right: 0;
}
.motto .editable-value .view .options {
	display: inline-block;
	opacity: 0;
	transform: translateX(-100%);
	margin-left: 8px;
	margin-right: calc(var(--ws-editable-btn-size) * -1 - 8px);
	/* ! DEBUG ONLY  */
	/* opacity: .2; */
}
.motto:hover .editable-value .view .options,
.motto .editable-value:hover .view .options,
.motto .editable-value.errored .view .options {
	display: inline-block;
	opacity: 1;
}
.motto:hover .editable-value .view .options:has(ws-btn),
.motto .editable-value:hover .view .options:has(ws-btn) {
	transform: translateX(0);
	transition:
		opacity .15s ease-in,
		transform .15s ease-in;
	transition-delay: .08s;
}
.motto .editable-value.editing .view {
	pointer-events: none;
	height: 40px;
	opacity: 0;
	overflow: hidden;
	/* ! DEBUG ONLY  */
	/* opacity: .2; */
}
.motto .editable-value.editing .view .options,
.motto .editable-value.readonly .view .options {
	display: none;
}
.motto .editable-value.editing .view + .input {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	min-width: 200px;
}
.motto .editable-value .input input {
	text-align: center;
	min-width: 200px;
}
.motto ws-editable:has(.loading) {
	pointer-events: none;
}
.motto .editable-value .options:has(.counter) {
	margin-right: -32px;
}
.motto .editable-value .input .counter {
	margin-right: -32px;
}
.motto .editable-value .counter {
	min-width: 24px;
	box-sizing: border-box;
}
.motto .view.loading:after {
	content: '';
	display: inline-block;
	margin-left: 8px;
	width: 16px;
	height: 16px;
	animation: loader .6s linear infinite;
	border-radius: 50%;
	padding: 2px;
	background: conic-gradient(from 90deg at 50.17% 50%, #73C7FF -7.5deg, rgba(255, 255, 255, 0) 41.25deg, rgba(255, 255, 255, 0) 93.75deg, #FFFFFF 179.31deg, #FFD6F6 258.75deg, #73C7FF 352.5deg, rgba(255, 255, 255, 0) 401.25deg);
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
			mask-composite: exclude;
	vertical-align: middle;
	margin-right: -28px;
}
@media (min-width: 481px) {
	.motto .editable-value .view.loading {
		padding-right: 8px; /* prevent position "jumping" */
	}
}
.motto .editable-value .view.loading .options {
	display: none;
}
.mobile .motto.motto .editable-value .view .options:not(:has(.counter)) {
	display: none;
}
@media (max-width: 480px) {
	.motto.motto .editable-value .view .options:not(:has(.counter)) {
		display: none;
	}
}
/* /MOTTO */

/* ICELAND */
.iceland {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 8px;
	min-height: 64px;
	border-radius: 60px;
	background: var(--base-cont-top);
	box-shadow: var(--shadow-cont-minor-outline);
	width: 100%;
}
.iceland__wrapper {
	display: grid;
	/* grid-template-columns: repeat(4, minmax(150px, 1fr)); */
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	align-items: center;
	overflow: hidden;
	gap: 12px 0;
	flex: 1;
	padding: 0 8px 0 0;
}
.iceland__item {
	position: relative;
	display: flex;
	padding: 0 12px;
	justify-content: center;
	align-items: center;
	gap: 10px;
}
.iceland__item[onclick] {
	cursor: pointer;
}
.iceland__item--stat::before {
	content: '';
	display: block;
	width: 1px;
	height: 28px;
	background: var(--base-line-secondary);
	position: absolute;
	left: -1px;
	top: 50%;
	transform: translateY(-50%);
}
.iceland__num {
	font: var(--font-ui-18-title-2-semi);
	color: var(--base-txt-primary);
}
@keyframes iceland-item-loading {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10%); }
}
.iceland__item--loading .iceland__num {
	animation: iceland-item-loading .4s ease-in-out infinite;
	color: var(--base-txt-tertiary);
}
.iceland__label {
	font: var(--font-txt-13-small-reg);
	color: var(--base-txt-tertiary);
	transition: color .1s ease;
}
.iceland__item[onclick]:hover .iceland__label {
	color: var(--base-txt-primary);
}
.iceland__label span.short {
	display: none;
}
@media screen and (min-width: 781px) and (max-width: 800px) {
	.iceland__label span:not(.short) {
		display: none;
	}
	.iceland__label span.short {
		display: inline-block;
	}
}
.iceland__dropdown {
	display: flex;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
}
.iceland__dropdown .in {
	font: var(--font-ui-15-large-reg);
	color: var(--base-txt-primary);
}
.iceland__switcher {
	display: none;
}
/* /ICELAND */

@media (min-width: 481px) {
	#dashboard-widgets-mobile-wrapper {
		display: none;
	}
}
@media (max-width: 480px) {
	.daily-overview__date, .daily-overview__weather {
		font: var(--font-ui-14-regular-med);
	}
	.dashboard__date {
		position: relative;
		gap: 4px;
		#dashboard-widgets-mobile-wrapper {
			display: flex;
			gap: 4px;
			color: var(--base-txt-secondary);
		}
	}
	.dashboard__motto {
		margin-bottom: 0;
	}
	.dashboard__iceland {
		margin-top: 24px;
	}
	.motto {
		--motto-font-size: 32px;
		padding: 0 var(--ws-editable-btn-size);
		max-width: 100%;
		width: 100%;
		overflow: hidden;
		padding: 0;
	}
	.motto .editable-value .view {
		height: 40px;
	}
	.motto .editable-value .view > *, .motto .editable-value .input {
		font: var(--font-ui-32-title-large-med);
		font-size: var(--motto-font-size);
		/* font: var(--font-ui-22-title-1-med); */
	}
	.motto .editable-value .view .value-field {
		white-space: nowrap;
		padding-left: 0;
	}
	.motto .editable-value .input .counter {
		margin-right: 0;
		position: absolute;
		right: 0;
		opacity: .8;
	}
	.motto.motto--hasOverflow .view.loading:after {
		margin-right: 0;
		position: absolute;
		right: 0;
		top: 10px;
		opacity: .8;
	}
}
@media (max-width: 780px) {
	.iceland {
		padding: 0;
		border-radius: 16px;
		height: 80px;
	}
	.iceland__wrapper {
		grid-template-columns: repeat(3, 1fr);
		gap: 0;
		padding: 0;
	}
	.iceland .iceland__item::before {
		height: 36px;
	}
	.iceland__item--dropdown {
		display: none;
	}
	.iceland__item--stat {
		flex-direction: column;
		gap: 0;
		padding: 0;
	}
	.iceland__num {
		font: var(--font-ui-22-title-1-semi);
	}
	.iceland__label {
		font: var(--font-ui-13-small-reg);
	}

	.iceland__label span:not(.short) {
		display: none;
	}
	.iceland__label span.short {
		display: inline-block;
	}

	.iceland__switcher {
		--switcher-active-i: 0;
		--switcher-n: 0; /* кількість контролів */
		--switcher-h: 16px; /* висота одного контролу */
		--switcher-g: 4px; /* gap між контролами */
		display: flex;
		align-self: stretch;
		width: 32px;
		overflow: clip;
		border-radius: 0 16px 16px 0;
	}
	.iceland__switcherTrack {
		position: relative;
		z-index: 2;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 12px;
		background: var(--base-cont-top);
		border-radius: 0 12px 12px 0;
	}
	.iceland__switcherTrack:after {
		content: '';
		position: absolute;

		--switcher-offset: calc((100% - (var(--switcher-h) * var(--switcher-n) + var(--switcher-g) * (var(--switcher-n) - 1))) / 2);

		top: calc( var(--switcher-offset) + (var(--switcher-h) + var(--switcher-g)) * (var(--switcher-active-i) - 1) );
		bottom: calc( var(--switcher-offset) + (var(--switcher-h) + var(--switcher-g)) * (var(--switcher-n) - var(--switcher-active-i)) );

		left: 50%;
		transform: translateX(-50%);
		border-radius: 4px;
		width: 4px;
		background: var(--base-txt-primary);
		pointer-events: none;
	}
	.iceland__switcher--backward .iceland__switcherTrack:after {
		transition: top 0.2s ease, bottom 0.2s ease 0.1s;
	}
	.iceland__switcher--forward .iceland__switcherTrack:after {
		transition: top 0.2s ease 0.1s, bottom 0.2s ease;
	}
	.iceland__switcherItem {
		width: 100%;
		height: calc(var(--switcher-h) + var(--switcher-g));
		padding: calc(var(--switcher-g) / 2) 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		flex-grow: 0;
		flex-shrink: 0;
	}
	.iceland__switcherItem:first-child {
		flex-grow: 1;
		align-items: flex-end;
	}
	.iceland__switcherItem:last-child {
		flex-grow: 1;
		align-items: flex-start;
	}
	.iceland__switcherItem:after {
		content: '';
		display: block;
		width: 4px;
		height: var(--switcher-h);
		background: var(--base-txt-muted);
		border-radius: 4px;
		transition: background-color .2s ease;
	}
	/* .iceland__switcherItem--active:after {
		background: var(--base-txt-primary);
	} */
	.iceland__switcherCaptionWrapper {
		position: relative;
		flex-shrink: 0;
		margin-left: -10px;
		width: 30px;
		box-sizing: border-box;
		border-radius: 0 16px 16px 0;
		background: var(--base-txt-muted);
		overflow: hidden;
		transition: background-color .2s ease;
	}
	.iceland__switcherCaption {
		--switcher-i: 1;
		position: absolute;
		left: 0;
		padding: 6px 0 6px 8px;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		color: var(--base-txt-alt-light);
		font: 10px/20px var(--font-mono);
		text-align: center;
		writing-mode: sideways-lr;
		text-orientation: sideways;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		text-transform: lowercase;

		transition: transform 0.2s linear;
		transform: translateY(calc((var(--switcher-i) - var(--switcher-active-i)) * 100% * -1));
	}
}

@media (min-width: 481px) and (max-width: 780px) {

	.iceland .avatar {
		width: 64px;
		height: 64px;
		margin-left: 8px;
		.av_nm {
			border-radius: 8px;
			scale: calc(64 / 48);
			transform-origin: left top;
		}
	}
	.iceland__switcherTrack:hover:has(.iceland__switcherItem--active:hover):after {
		background: var(--base-txt-max);
	}
	.iceland__switcherItem:hover:after {
		background: var(--base-txt-tertiary);
	}
	.iceland__switcherCaptionWrapper:hover {
		background: var(--base-txt-tertiary);
	}
}