@import "../../constants/index.scss";

.addCarouselElementWrapper {
  display: inline-block;
  vertical-align: middle;
  width: $width/1.8;
  min-width: $width/1.8;
  border: 1px solid $border-color;
  border-radius: $border-radius;
  overflow: hidden;
  background-color: #fff;
  // margin-right: 18px;
  transform: translateY(30%);
  margin-left: 26px;
  transition: 0.5s cubic-bezier(0.175, 0.5, 0.12, 1);
  min-height: 200px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  &:hover {
    background: #fff;
    background-color: mix(#fff, $primary-color, 95%);
  }

  &.active {
    transform: translateY(30%) scale3d(1.3, 1.3, 1.3);
  }
}

// .carouselWrapperEnlarged {
//   transform: scale3d(1, 1, 1);
// }

.carouselLessMarginRight {
  margin-right: -24px;
  transform-origin: 0 50%;
}

.addCarouselElementText {
  font-size: 18px;
  color: $primary-color;
  text-align: center;
}

.addCarouselElementIcon {
  width: 48px;
  height: 48px;
  border-radius: 100px;
  margin-bottom: 16px;
  svg g {
    stroke: $primary-color;
  }

  svg path {
    fill: $primary-color;
  }
}