@import "../settings.colors";

@import "tools.mixins";

$c-photo-slider-button-width: 44px;
$c-photo-slider-button-offset: 2px;

@mixin c-photo-slider-indexes($list, $nav) {
  .c-photo-slider__list {
    z-index: $list;
  }
  .c-photo-slider__nav {
    z-index: $nav;
  }
}

@mixin c-photo-slider-mobile() {
  .c-photo-slider--full,
  .c-photo-slider--contain {
    @include c-photo-slider-indexes(3, 2);
  }

  .c-photo-slider__nav-icon {
    fill: $color-grey-300;
  }
}

@mixin c-photo-slider-tablet() {
  .c-photo-slider__nav-icon {
    fill: $color-grey-300;
  }

  .c-photo-slider__nav-button {
    &:active {
      .c-photo-slider__nav-icon {
        fill: $color-grey-500;
      }
    }
  }

  // bg is black, so use white fill color
  .c-photo-slider--full {
    @include c-photo-slider-indexes(2, 3);
    @include c-photo-slider-block-button();
  }

  // bg is white, so use grey fill color
  .c-photo-slider--contain {
    .c-photo-slider__nav-button {
      &:hover,
      &:focus {
        .c-photo-slider__nav-icon {
          fill: $color-grey-500;
        }
      }
    }

    .c-photo-slider__nav-button--left {
      left: rem(-($c-photo-slider-button-width - $c-photo-slider-button-offset));
    }

    .c-photo-slider__nav-button--right {
      right: rem(-($c-photo-slider-button-width - $c-photo-slider-button-offset));
    }

    @include c-photo-slider-indexes(2, 3);
  }
}

@mixin c-photo-slider-desktop() {
  .c-photo-slider--full,
  .c-photo-slider--contain {
    @include c-photo-slider-indexes(2, 3);
  }

  @include c-photo-slider-block-button();
}

@mixin c-photo-slider-block-button() {
  .c-photo-slider__nav {
    &:hover {
      .c-photo-slider__nav-button {
        background-color: $color-grey-900;

        .c-photo-slider__nav-icon {
          fill: $color-grey-500;
        }
      }
    }

    .c-photo-slider__nav-button {
      &:hover,
      &:focus {
        background-color: $color-grey-900;

        .c-photo-slider__nav-icon {
          fill: $color-white;
        }
      }
      &:active {
        .c-photo-slider__nav-icon {
          fill: $color-grey-500;
        }
      }
    }
  }
}

// Aspect Ratio Boxes - The Psuedo Element Tactic
// https://css-tricks.com/aspect-ratio-boxes/#article-header-id-6
@mixin c-photo-slider-ratio-box($x, $y) {
  &::before {
    content: "";
    float: left;
    padding-top: ($y / $x) * 100%; // x:y ratio
  }
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

// styles to apply to a ratio contained inline gallery placeholder
@mixin c-photo-slider-placeholder($x, $y) {
  background-color: $color-grey-800;

  @include c-photo-slider-ratio-box($x, $y);

  .c-photo-slider__list {
    list-style: none;
  }
}

// styles to apply to a ratio contained inline gallery
@mixin c-photo-slider-inpage($x, $y) {
  .c-photo-slider__canvas {
    position: relative;
    @include c-photo-slider-ratio-box($x, $y);
  }
}
