@include export-module('cc-carousel-layout') {
  .co-carousel {
    position: relative;
    .carousel-wrapper {
      position: relative;
      display: flex;
      flex-direction: row;
      column-gap: $cc-co-carousel-column-gap;
      padding: $cc-co-carousel-padding;
      overflow: hidden;
      scroll-behavior: smooth;
      > * {
        flex-shrink: 0;
      }
    }
    .carousel-navigate-button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      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-navigate-button-width;
        width: $cc-co-carousel-navigate-button-width;
        background: $cc-co-carousel-navigate-button-background-color;
        box-shadow: $cc-co-carousel-navigate-button-box-shadow;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: $cc-co-carousel-navigate-button-border-radius;
        opacity: $cc-co-carousel-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-navigate-button-border-opacity-hover;
        }
      }
    }
  }
}
