@include export-module('co-scroll-container-layout') {
  .co-scroll-container {
    position: relative;
    display: flex;
    .content-wrapper {
      height: 100%;
      width: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: row;
      padding: 2px;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
    }
    .scroll-layer {
      position: absolute;
      height: 100%;
      width: 100%;
      pointer-events: none;
    }
    .scroller {
      position: absolute;
      pointer-events: all;
      width: 25px;
      height: 35px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
      border-radius: 2px;
      &:hover {
        background: rgba($cc-color-action-accent, 0.5);
        transition: all .2s ease;
      }
    }

    .left-scroll {
      left: 0;
      &:before {
        content: '';
        border: solid $cc-color-action;
        border-width: 0 6px 6px 0;
        display: inline-block;
        padding: 5px;
        transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
        margin-left: 5px;
        margin-top: 10px;
      }
    }

    .right-scroll {
      right: 0;
      &:after {
        content: '';
        border: solid $cc-color-action;
        border-width: 0 6px 6px 0;
        display: inline-block;
        padding: 5px;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        margin-left: 5px;
        margin-top: 10px;
      }
    }

  }
}
