// RAMEN GALLERY COMPONENT
//
//
// Required Global Variables:
// $global-transition-speed
// $global-easing
//
//
// Required Component Variables:
//
//
//

@mixin gallery {
  background-color: $gallery-background-color;
  position: relative;
  width: 100%;
}

@mixin gallery-controls {
  align-items: center;
  background-color: $gallery-controls-background-color;
  color: $gallery-controls-color;
  display: flex;
  width: 100%;
}

@mixin gallery-caption {
  flex: 1 1 auto;
  opacity: 1;
  padding: $gallery-controls-padding;
  transition: opacity 200ms $global-easing 0s;

  .is-transitioning & {
    opacity: 0;
  }
}

@mixin gallery-counter {
  flex: 0 0 auto;
  font-weight: $font-weight-bold;
  margin-left: auto;
  padding: $gallery-controls-padding;
}

@mixin gallery-actions {
  height: 0;
  justify-content: space-between;
  padding-top: $gallery-image-aspect-ratio;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;

  @include breakpoint($bp-medium) {
    display: flex;
    flex: 0 0 auto;
    height: auto;
    margin-left: auto;
    padding: 0;
    position: static;
    width: auto;
  }
}

@mixin gallery-button-base {
  pointer-events: all;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  @include breakpoint($bp-medium) {
    position: relative;
    transform: none;
  }
}

@mixin gallery-button-next {
  right: 0;
}

@mixin gallery-button-previous {
  left: 0;
}

.c-gallery {
  @include gallery;

  &__controls {
    @include gallery-controls;
  }

  &__caption {
    @include gallery-caption;
  }

  &__counter {
    @include gallery-counter;
  }

  &__actions {
    @include gallery-actions;
  }

  &__button-next {
    @include gallery-button-base;
    @include gallery-button-next;
  }

  &__button-previous {
    @include gallery-button-base;
    @include gallery-button-previous;
  }
}