assets/styles/components/_carousel.scss
.carousel-agnostic {
@import './carousel-arrows';
.keen-slider {
padding-bottom: 16px;
}
.carousel-item {
a:hover {
color: unset !important;
}
@include ktheme() {
background: theme('background-color');
border: 1px solid theme('card-border-color');
&:hover {
border-color: theme('border-color');
.carousel-media {
opacity: theme('card-hover-opacity');
}
}
}
}
.carousel-media {
display: grid;
align-items: center;
@include ktheme() {
border-bottom: 1px solid theme('card-border-color');
}
&-collection {
border-bottom: none !important;
padding: 16px 16px 0 16px;
a {
@include ktheme() {
border: 1px solid theme('card-border-color');
}
display: block;
}
}
&-wrapper {
box-shadow: none !important;
border: none !important;
}
}
.carousel-info-arrow {
font-family: 'Fira Code', monospace;
}
.dots {
display: flex;
padding: 32px 0;
justify-content: center;
@media screen and (max-width: 640px) {
display: none;
}
}
.dot {
@apply w-2.5 h-2.5 cursor-pointer mx-3 my-0 p-[5px] border-[none];
&:focus {
outline: none;
}
@include ktheme() {
background: theme('k-shade');
&.active {
background: theme('k-grey');
}
}
}
}