@layer addon { .splide__pagination { background-color: rgba(var(--color-dark-transparency), 0.1); margin-top: var(--padding); width: fit-content; border-radius: 48px; display: flex; gap: 8px; padding: 8px; @media (max-width: 56em) { margin: calc(var(--padding) * 2) auto var(--padding) auto; } @media (--max-fablet) { margin: calc(var(--padding) * 2) auto var(--padding) auto; } li { display: flex; button { margin: 0; height: 6px; border-radius: 16px; width: 6px; transform: none; transition: all 0.4s ease-in-out; background-color: rgba(var(--color-dark-transparency), 0.2); .themeColor3 & { background-color: var(--color-light); } &.is-active { background-color: var(--color-dark); opacity: 1; width: 48px; } } } .themeColor2 &, .themeColor3 & { background-color: rgba(var(--color-light-transparency), 0.1); li button { background-color: rgba(var(--color-light-transparency), 0.3); &.is-active { background-color: var(--color-light); } } } } .splide__arrows { .splide__arrow { width: 32px; height: 32px; background-color: rgba(var(--color-dark-transparency), 0.1); color: var(--color-dark); .icon { width: 15px; height: 100%; } .themeColor2 &, .themeColor3 & { background-color: rgba(var(--color-light-transparency), 0.1); color: var(--color-light); } &:hover { @media (hover: hover) { color: var(--color-light); background-color: var(--color2); } } &[disabled] { pointer-events: none; } } } }