@import "../../style/property.pcss"; @import "../../style/display.pcss"; @import "../../style/border.pcss"; @import "../../style/theme.pcss"; @import '../../style/mixin/typography.pcss'; :host { box-sizing: border-box; } [data-monster-role=control] { display: flex; overflow: hidden; width: 100%; height: 100%; position: relative; box-sizing: border-box; --monster-slides-width: 100%; } [data-monster-role=slider] { display: flex; scroll-snap-type: x mandatory; scroll-behavior: smooth; width: 100%; height: 100%; scrollbar-width: none; box-sizing: border-box; } [data-monster-role=slider].animate { transition: all 0.3s ease-in-out; } [data-monster-role=slider].grabbing { cursor: grabbing; user-select: none; box-sizing: border-box; } ::slotted(div) { flex: 0 0 var(--monster-slides-width); height: 100%; display: flex; box-sizing: border-box; } .prev { position: absolute; top: 28%; left: 0.5rem; height: max-content; width: max-content; display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; z-index: var(--monster-z-index-sticky); box-sizing: border-box; } .prev:hover { transform: scale(1.2); } .next { position: absolute; top: 28%; right: 0.5rem; height: max-content; width: max-content; display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; z-index: var(--monster-z-index-sticky); box-sizing: border-box; } .next:hover { transform: scale(1.2); } [data-monster-role="thumbnails"] { position: absolute; bottom: 20px; left: 50%; border-radius: 0.5rem; transform: translateX(-50%); z-index: var(--monster-z-index-sticky); display: grid; grid-auto-flow: column; gap: 0.5rem; } [data-monster-role="thumbnails"] .thumbnail { width: 1rem; height: 1rem; margin: 0.5rem; cursor: pointer; border-radius: 50%; background-color: var(--monster-bg-color-primary-1); color: var(--monster-color-primary-1); filter: chroma(0 0 0 0); box-sizing: border-box; } [data-monster-role="thumbnails"] .thumbnail.current { background-color: var(--monster-bg-color-primary-3); color: var(--monster-color-primary-3); }