@use "_theme.scss";

.multi-carousel-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding:10px 0 0 0;

  .multi-carousel-arrow {
    margin-top: auto;
    margin-bottom: auto;
    cursor: pointer;

    &.disabled {
      cursor: unset;
      opacity: 0.2;
    }

    .icon {
      width: 100% !important;
      height: 100% !important;
    }

    &.left-arrow {
      margin-right: auto;
    }

    &.right-arrow {
      margin-left: auto;
    }
  }

  .multi-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    .multi-carousel {
      display: flex;
      justify-content: flex-start;
      position: absolute;
      transition: left 1s ease;

      .multi-carousel-item-wrapper {
        box-shadow: 0 0 0 1px var(--color-line);
        background-color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        .image-loader {
          width: 100%;
          height: 100%;
        }

        &.highlight-border {
          box-shadow: 0 0 0 1px #000000;
        }

        img,
        .multi-carousel-image {
          object-fit: contain;
          max-width: 100%;
          max-height: 100%;
        }
      }
    }
  }
}
