$slider-arrow-width: 45px;
.image-slider {
  @extend .grid-x,
  .align-middle;
  position: relative;
  .slick-list,
  .slick-list .slick-track,
  .slick-slide,
  .slick-slide>div,
  .slick-slide>div img {
    width: 100%;
    height: 100%;
  }
  .slick-next,
  .slick-prev {
    display: none !important;
  }
  &__list {
    display: flex !important;
    flex: 1;
    height: 100%;
    width: 100%;
  }
  &__arrow {
    position: absolute;
    z-index: 1;
    background-color: $white;
    height: #{$slider-arrow-width * 2};
    width: $slider-arrow-width;
    opacity: 0.56;
    cursor: pointer;
    transition: all 100ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
    z-index: 10;
    &:hover {
      opacity: 0.90;
    }
    &--previous {
      border-bottom-right-radius: #{$slider-arrow-width * 2};
      border-top-right-radius: #{$slider-arrow-width * 2};
      left: 0;
    }
    &--next {
      border-bottom-left-radius: #{$slider-arrow-width * 2};
      border-top-left-radius: #{$slider-arrow-width * 2};
      right: 0;
    }
    &-icon {
      width: 28px;
      font-size: 40px;
    }
  }
  &__dots-group {
    flex: 1;
  }
  &__dot-link {
    @include box(20px, 20px, true);
    background-color: $primary-color;
    margin: rem-calc(5px 2px);
    cursor: pointer;
    &--active {
      background-color: $warning-color;
    }
  }
}

.image-previewer {
  &__holder {
    background: $light-gray;
    height: 100%;
  }
}

.image-uploader-profile {
  &__dropzone {
    width: rem-calc(181);
    height: rem-calc(170);
  }
}

%holder-item {
  cursor: pointer;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
}

.image-array-holder-square {
  width: 100%;
  height: 100%;
  position: relative;
  &__item-wrapper {
    position: absolute;
    padding: 4px;
    margin-left: 4px;
    width: calc(50% - 8px);
    height: calc(50% - 4px);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    &:hover,
    &--hover {
      padding: 2px;
    }
  }
  &__item {
    @extend %holder-item;
  }
  &__unique-item {
    @extend %holder-item;
  }
  &__unique-item-wrapper {
    position: absolute;
    padding: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 4px);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    &:hover,
    &--hover {
      padding: 2px;
    }
  }
  &__item-more-images {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 4px;
    position: absolute;
    width: calc(50% - 14px) !important;
    height: calc(50% - 9px);
    bottom: 7px;
    right: 7px;
    font-size: 35px;
    color: #ffffff;
    font-weight: 300;
    -webkit-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    &:hover {
      width: calc(50% - 12px) !important;
      height: calc(50% - 7px);
      right: 10px;
    }
  }
  &__item-more-images-unique {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 4px;
    position: absolute;
    width: calc(100% - 14px) !important;
    height: calc(100% - 9px);
    bottom: 6px;
    right: 11px;
    font-size: 35px;
    color: #ffffff;
    font-weight: 300;
    -webkit-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    &:hover {
      width: calc(100% - 12px) !important;
      height: calc(100% - 7px);
      right: 10px;
    }
  }
}

.image-slider {
  height: 100%;
  .slick-slider,
  .slick-list {
    height: 100%;
  }
  >* {
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    max-height: 100%;
  }
}