.cwa-discover-section.cwa-discover-refresh-off .cwa-discover-refresh,
.cwa-discover-section .cwa-discover-refresh[hidden] {
display: none !important;
} html.cwa-discover-restoring
.cwa-discover-section:not(.cwa-discover-dynamic-off)
.cwa-discover-refresh {
visibility: hidden !important;
}
html.cwa-discover-restoring
.cwa-discover-section:not(.cwa-discover-dynamic-off)
.cwa-discover-grid:not([data-cwa-dynamic="off"]) {
position: relative;
pointer-events: none !important;
transition: none !important;
}
html.cwa-discover-restoring
.cwa-discover-section:not(.cwa-discover-dynamic-off)
.cwa-discover-grid:not([data-cwa-dynamic="off"]) > * {
visibility: hidden !important;
opacity: 0 !important;
}
html.cwa-discover-restoring
.cwa-discover-section:not(.cwa-discover-dynamic-off)
.cwa-discover-grid:not([data-cwa-dynamic="off"])::before,
html.cwa-discover-restoring
.cwa-discover-section:not(.cwa-discover-dynamic-off)
.cwa-discover-grid:not([data-cwa-dynamic="off"])::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
width: 16px;
height: 16px;
border-radius: 2px;
pointer-events: none;
will-change: transform;
}
html.cwa-discover-restoring
.cwa-discover-section:not(.cwa-discover-dynamic-off)
.cwa-discover-grid:not([data-cwa-dynamic="off"])::before {
background: var(--cwa-teal, #3fb8af);
animation: cwa-discover-restore-teal 2s infinite alternate ease-in-out;
}
html.cwa-discover-restoring
.cwa-discover-section:not(.cwa-discover-dynamic-off)
.cwa-discover-grid:not([data-cwa-dynamic="off"])::after {
background: var(--cwa-pink, #ff3d7f);
animation: cwa-discover-restore-pink 2s infinite alternate ease-in-out;
} @layer cwa-discover-defaults {
:where(.cwa-discover-section) :where(.cwa-discover-refresh) {
appearance: none;
display: inline-flex;
box-sizing: border-box;
min-height: 34px;
padding: 0 14px;
align-items: center;
justify-content: center;
gap: 7px;
border: 1px solid rgba(77, 185, 189, 0.52);
border-radius: 999px;
background: rgba(255, 255, 255, 0.97);
color: var(--cwa-teal-dark, #319fa3);
font: inherit;
font-size: 13.5px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
box-shadow: 0 2px 7px rgba(31, 41, 55, 0.045);
cursor: pointer;
transition:
color 0.18s ease,
background-color 0.18s ease,
border-color 0.18s ease,
box-shadow 0.18s ease,
transform 0.18s ease,
opacity 0.18s ease;
}
:where(.cwa-discover-section) :where(.cwa-discover-refresh__icon) {
display: inline-flex;
width: 15px;
height: 15px;
flex: 0 0 15px;
align-items: center;
justify-content: center;
}
:where(.cwa-discover-section) :where(.cwa-discover-refresh__icon svg) {
display: block;
width: 100%;
height: 100%;
}
:where(.cwa-discover-section)
:where(.cwa-discover-refresh:not(.is-disabled):hover) {
border-color: rgba(49, 159, 163, 0.76);
background: rgba(241, 252, 252, 0.98);
color: #278d92;
box-shadow: 0 5px 13px rgba(31, 41, 55, 0.075);
transform: translateY(-1px);
}
:where(.cwa-discover-section)
:where(.cwa-discover-refresh:not(.is-disabled):active) {
box-shadow: 0 2px 6px rgba(31, 41, 55, 0.05);
transform: translateY(0);
}
:where(.cwa-discover-section)
:where(.cwa-discover-refresh:not(.is-disabled):focus-visible) {
outline: 3px solid rgba(77, 185, 189, 0.25);
outline-offset: 3px;
}
:where(.cwa-discover-section)
:where(.cwa-discover-refresh:disabled),
:where(.cwa-discover-section)
:where(.cwa-discover-refresh.is-disabled) {
opacity: 0.58;
cursor: default;
pointer-events: none;
transform: none;
}
:where(.cwa-discover-section)
:where(.cwa-discover-refresh.is-loading) {
cursor: progress;
opacity: 0.76;
}
@media (max-width: 640px) {
:where(.cwa-discover-section) :where(.cwa-discover-refresh) {
min-height: 32px;
padding: 0 11px;
gap: 6px;
font-size: 12.5px;
}
:where(.cwa-discover-section) :where(.cwa-discover-refresh__icon) {
width: 14px;
height: 14px;
flex-basis: 14px;
}
}
} :where(.cwa-discover-section)
:where(.cwa-discover-refresh.is-loading .cwa-discover-refresh__icon) {
animation: cwa-discover-spin 0.9s linear infinite;
}
.cwa-discover-grid {
transition: opacity 0.15s ease, transform 0.15s ease;
}
.cwa-discover-grid.is-refreshing {
opacity: 0;
transform: translateY(4px);
}
.cwa-discover-grid.is-entering {
opacity: 0;
transform: translateY(-4px);
}
.cwa-discover-status {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
@keyframes cwa-discover-restore-teal {
0%,
40% {
transform: translate(-30px, -50%) rotate(0deg) translateX(0);
}
80%,
100% {
transform: translate(-50%, -50%) rotate(180deg) translateX(-8px);
}
}
@keyframes cwa-discover-restore-pink {
0%,
40% {
transform: translate(14px, -50%) rotate(0deg) translateX(0);
}
80%,
100% {
transform: translate(-50%, -50%) rotate(180deg) translateX(8px);
}
}
@keyframes cwa-discover-spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.cwa-discover-refresh,
.cwa-discover-refresh span,
.cwa-discover-grid {
animation: none !important;
transition: none !important;
}
html.cwa-discover-restoring
.cwa-discover-section:not(.cwa-discover-dynamic-off)
.cwa-discover-grid:not([data-cwa-dynamic="off"])::before,
html.cwa-discover-restoring
.cwa-discover-section:not(.cwa-discover-dynamic-off)
.cwa-discover-grid:not([data-cwa-dynamic="off"])::after {
animation: none !important;
}
html.cwa-discover-restoring
.cwa-discover-section:not(.cwa-discover-dynamic-off)
.cwa-discover-grid:not([data-cwa-dynamic="off"])::before {
transform: translate(-30px, -50%);
}
html.cwa-discover-restoring
.cwa-discover-section:not(.cwa-discover-dynamic-off)
.cwa-discover-grid:not([data-cwa-dynamic="off"])::after {
transform: translate(14px, -50%);
}
}