(~'div@{sliderid}') {
  margin: @margin;

  .n2-ss-slider-1 {
    display: grid;
    position: relative;
  }

  .n2-ss-slider-2 {
    display: grid;
    place-items: center;
    position: relative;

    overflow: hidden;
    border: @border solid @borderrgba;
    border-radius: @borderRadius;

    background-repeat: repeat;
    background-position: 50% 50%;
    background-size: @backgroundSize;
    background-attachment: @backgroundAttachment;
    background-color: @backgroundrgba;
    z-index: 1;
  }

  .n2-ss-slider-3 {
    box-sizing: border-box;
    display: grid;
    grid-template-areas: 'full';
    place-items: center;

    position: relative;
    overflow: hidden;
    z-index: 20;
    width: 100%;

    > * {
      grid-area: full;
    }
  }

  .n2-ss-slider-pane-single {
    display: grid;
    position: relative;
    overflow: hidden;
    width: 100%;

    opacity: 0.001;
  }

  .n2-ss-slider-pane-single--ready {
    animation-name: carousel-single-fade-in;
    animation-duration: 1s;
    opacity: 1;
  }

  .n2-ss-slider-pipeline {
    display: grid;
    grid-template-areas: 'slide';

    margin: 0 var(--self-side-margin);

    position: relative;
    transform-style: preserve-3d;

    > * {
      grid-area: slide;
    }
  }

  .n2-ss-slide {
    z-index: 1;
    position: relative;
    width: 100%;
    max-width: var(--slide-width);
    display: block;

    border-radius: @slideBorderRadius;
    background-clip: padding-box;

    background-color: @slideBackgroundrgba;

    border: @slideborderwidth solid @slidebordercolor;
    box-sizing: border-box;

    --a: calc(var(--slide-index) * var(--slide-width));
    --b: calc(var(--slide-index) * 2);
    --c: calc(var(--b) + 1);
    --d: calc(var(--c) * var(--slide-side-margin));
    transform: translateX(calc(var(--a) + var(--d)));

    html[dir="rtl"] & {
      transform: translateX(calc(-1 * var(--a) - var(--d)));
    }
  }

  .n2-ss-slider-pipeline .n2-ss-preserve-size {
    width: 100%;
    max-width: @slideouterwidth;
  }

  .n2-ss-layers-container {
    position: relative;
  }

  .ssPerspective() when (@hasPerspective = 1) {
    .n2-ss-slide {
      perspective: @perspective;
    }
  }
  .ssPerspective();

  .n2-ss-slide-active {
    z-index: 3;
  }

  .n2-ss-layer {
    -webkit-backface-visibility: hidden;
  }

}


@keyframes carousel-single-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}