(~'div@{sliderid}') {

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

  .n2-ss-slider-2 {
    display: grid;
    grid-template-areas: 'full';

    position: relative;
    overflow: hidden;

    border: @border solid @borderrgba;
    box-sizing: border-box;

    border-radius: @borderRadius;

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

    > * {
      grid-area: full;
    }

    > .n2-ss-preserve-size {
      max-width: @sliderwidth;
    }
  }

  .n2-ss-slider-3 {
    display: grid;
    grid-template-areas: 'cover';

    > * {
      grid-area: cover;
    }

    position: relative;
    overflow: hidden;

    z-index: 20;
  }

  .n2-ss-showcase-slides {
    place-self: center;

    position: relative;

    display: grid;
    grid-template-areas: 'slide';
    width: 100%;
    max-width: @slideouterwidth;

    perspective-origin: 50% 50%;
    perspective: @perspective;

    opacity: 0.001;
    transform: translateX(-100000px);

    > * {
      grid-area: slide;
    }
  }

  .n2-ss-showcase-slides--ready {
    animation-name: showcase-fade-in;
    animation-duration: 1s;
    opacity: 1;
    transform: none;
  }

  .n2-ss-slide {
    display: block;
    width: 100%;
    border-radius: @slideBorderRadius;
    border: @slideborderwidth solid @slidebordercolor;
    box-sizing: border-box;

    backface-visibility: hidden;
  }

  &.n2-ss-showcase-vertical .n2-ss-slide {
    clear: left;
  }

  .n2-ss-slide-inner {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 20;
  }

  .n2-ss-showcase-overlay {
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000000;
    display: block;
  }

  .n2-ss-slide-active .n2-ss-showcase-overlay {
    display: none;
  }

  .smart-slider-animate-in .n2-ss-showcase-overlay,
  .smart-slider-animate-out .n2-ss-showcase-overlay {
    display: block;
  }

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

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

}


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