.carousel {
  // display: inline-flex;
  overflow: hidden;
  display: flex;
  min-width: 100px;
}
.carousel-inner-wrap {
  flex: 1;
  padding: 0 20px;
  overflow: hidden;

  &>div {
    overflow: hidden;
  }
}
.carousel-prev, .carousel-next {
  flex: 0 0 24px;
  display: flex;
  width: 24px;
  border: 1px solid #ccc;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  &:hover{
    border-color: #2d84e5;

    .icon-arrow {
      border-top-color: #2d84e5;
      border-right-color: #2d84e5;
    }
  }
  &.disabled{
    border-color: #e6e6e6;
    cursor: not-allowed;

    .icon-arrow {
      border-top-color: #e6e6e6;
      border-right-color: #e6e6e6;
    }
  }
}
.carousel-prev .icon-arrow {
  transform: rotate(-135deg);
  border-top-color: #999;
  border-right-color: #999;
}
.carousel-next .icon-arrow {
  transform: rotate(45deg);
  border-top-color: #999;
  border-right-color: #999;
  margin-left: 0;
  margin-top: 0;
}

.carousel-inner {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  transition: transform 1s;
}