/**
 * Scroll to top: Experience Gallery's navy glass arrow, turned up, with its ring just inside the edge.
 *
 * @package Atheria_Core
 * @since   1.0.0
 */

/* Scoped with its attribute to sit above the Kit's button styles. */
.ath-scroll-top[data-ath-scroll-top] {
	position:                fixed;
	z-index:                 998;
	right:                   24px;
	bottom:                  calc(24px + var(--ath-scroll-top-lift, 0px));
	display:                 grid;
	place-items:             center;
	box-sizing:              border-box;
	width:                   48px;
	height:                  48px;
	margin:                  0;
	padding:                 0;
	border:                  1px solid rgba(255, 255, 255, 0.32);
	border-radius:           50%;
	background:              color-mix(in srgb, var(--ath-arctic-navy) 60%, transparent);
	color:                   #fff;
	box-shadow:              none;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter:         blur(8px);
	cursor:                  pointer;
	-webkit-appearance:      none;
	appearance:              none;
	opacity:                 0;
	visibility:              hidden;
	transition:              background-color 0.2s ease;
}

.ath-scroll-top--left[data-ath-scroll-top] {
	right: auto;
	left:  24px;
}

.ath-scroll-top[data-ath-scroll-top]:hover {
	background: color-mix(in srgb, var(--ath-arctic-navy) 70%, transparent);
	color:      #fff;
}

.ath-scroll-top[data-ath-scroll-top]:focus {
	outline: none;
}

/* D-130's two-tone ring, which reads over any photo or section the button crosses. */
.ath-scroll-top[data-ath-scroll-top]:focus-visible {
	outline:        var(--ath-focus-ring-width) solid var(--ath-on-surface);
	outline-offset: var(--ath-focus-ring-width);
	box-shadow:     0 0 0 var(--ath-focus-ring-width) var(--ath-surface-raised);
}

.ath-scroll-top__ring {
	position:       absolute;
	inset:          0;
	width:          100%;
	height:         100%;
	transform:      rotate(-90deg);
	pointer-events: none;
}

.ath-scroll-top__track,
.ath-scroll-top__fill {
	fill:         none;
	stroke:       currentColor;
	stroke-width: 2;
}

.ath-scroll-top__track {
	stroke-opacity: 0.22;
}

.ath-scroll-top__fill {
	stroke-dasharray:  128.81;
	stroke-dashoffset: 128.81;
}

.ath-scroll-top__arrow {
	position:        relative;
	width:           18px;
	height:          18px;
	fill:            none;
	stroke:          currentColor;
	stroke-width:    2;
	stroke-linecap:  round;
	stroke-linejoin: round;
	pointer-events:  none;
}

/* An open menu covers the page, so the button steps aside and leaves the tab order until it closes. */
:is(body.ath-menu-open, body.ath-mega-nav-open) .ath-scroll-top[data-ath-scroll-top] {
	visibility:     hidden !important;
	pointer-events: none;
}