[class*="swiper-switch"] {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: hsl(var(--primary));
}

.swiper-switch--outlined-large {
    width: var(--button--large, 40px);
    height: var(--button--large, 40px);
    border-color: hsla(0,0%,100%,.2);
    background-color: hsla(0, 0%, 100%, 0.102);
}

.swiper-switch--outlined-large:hover {
    background-color: #fff3;
}

.swiper-switch--pause .play-icon {
    display: none;
}

.swiper-switch--pause .pause-icon {
    display: flex;
}

.swiper-switch--play .pause-icon {
    display: none;
}

.swiper-switch--play .play-icon {
    display: flex;
}

.play-icon,
.pause-icon {
    display: flex;
    width: 16px;
    height: 16px;
}

/* Play icon */
.play-icon {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolygon points="6 3 20 12 6 21 6 3"%3E%3C/polygon%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter:invert(-1);
}

/* Pause icon */
.pause-icon {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="14" y="4" width="4" height="16" rx="1"%3E%3C/rect%3E%3Crect x="6" y="4" width="4" height="16" rx="1"%3E%3C/rect%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: none;
}