@import "../../helpers";
.sf-gallery {
  display: flex;
  flex-direction: var(--gallery-flex-direction, column);
  &__thumbs {
    display: var(--gallery-thumbs-display, flex);
    flex: var(--gallery-thumbs-flex);
    flex-direction: var(--gallery-thumbs-flex-direction);
    margin: var(--gallery-thumbs-margin, var(--spacer-xs) 0 0 0);
    order: var(--gallery-thumbs-order);
    overflow: auto;
    &::-webkit-scrollbar {
      width: 0;
    }
  }
  &__item {
    display: flex;
    flex: 0 0 var(--gallery-thumb-width, 10rem);
    margin: var(--gallery-item-margin, 0 var(--spacer-xs) 0 0);
    &:last-child {
      --gallery-item-margin: 0;
    }
    opacity: var(--gallery-item-opacity, 0.5);
    transition: var(--gallery-item-transition, opacity 150ms ease-in-out);
    cursor: var(--gallery-item-cursor, pointer);
    &--selected {
      --gallery-item-opacity: 1;
      --gallery-item-cursor: default;
    }
  }
  &__stage {
    flex: 1;
    max-width: var(--gallery-stage-width, 26.375rem);
  }
  &__zoom {
    position: absolute;
    left: 50%;
    top: 0;
  }
  .glide {
    &__slide {
      flex: 1;
      display: flex;
    }
    &__slides {
      margin: 0;
    }
  }
  @include for-desktop {
    --gallery-flex-direction: row;
    --gallery-thumbs-flex: 0 0 var(--gallery-thumb-width, 10rem);
    --gallery-thumbs-flex-direction: column;
    --gallery-thumbs-order: -1;
    --gallery-thumbs-margin: 0 var(--spacer-xs) 0 0;
    --gallery-item-margin: 0 0 var(--spacer-xs) 0;
    &__item {
      &:last-child {
        --gallery-item-margin: 0;
      }
    }
  }
}