@include export-module('cc-carousel-3d-layout') {
  .co-carousel-3d {
    display: block;
    width: 100%;
    height: 100%;
    .carousel-3d-canvas-wrapper {
      position: relative;
      height: 100%;
      width: 100%;
    }
    .carousel-wrapper {
      position: absolute;
      overflow: hidden;
      width: 100%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
      -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
      -khtml-user-select: none; /* Konqueror HTML */
      -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
      user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
    }
    .carousel-navigate-button {
      position: absolute;
      display: flex;
      align-items: center;
      height: 100%;
      overflow: hidden;
      z-index: 1;
      padding: 0 10px;
      &.right {
        right: 0;
      }
      .carousel-navigate-button-wrapper {
        height: $cc-co-carousel-3d-navigate-button-width;
        width: $cc-co-carousel-3d-navigate-button-width;
        background: $cc-co-carousel-3d-navigate-button-background-color;
        box-shadow: $cc-co-carousel-3d-navigate-button-box-shadow;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: $cc-co-carousel-3d-navigate-button-border-radius;
        opacity: $cc-co-carousel-3d-navigate-button-border-opacity;
        pointer-events: all;
        svg {
          width: 75%;
          height: 75%;
          vertical-align: middle;
          fill:grey;
        }
      }
      &:hover {
        .carousel-navigate-button-wrapper {
          opacity: $cc-co-carousel-3d-navigate-button-border-opacity-hover;
        }
      }
    }
  }
}
