//
// Image mixins.
//

//
// Fit image into parent object.
//
@mixin ct-image-fit($self: false) {
  @if $self {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  @else {
    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }
}

//
// Fit image into text size.
//
@mixin ct-image-fit-text-size($self: false) {
  @if $self {
    height: 1em;
    width: 1em;
    object-fit: cover;
  }
  @else {
    img {
      height: 1em;
      width: 1em;
      object-fit: cover;
    }
  }
}

//
// Fit image into a container.
//
@mixin ct-image-fit-container() {
  @include ct-image-fit();

  position: relative;

  img {
    position: absolute;
    top: 0;
    left: 0;
  }
}

//
// Fit image into a square container.
//
@mixin ct-image-container-square() {
  @include ct-image-fit();

  position: relative;
  width: 100%;
  padding-top: 100%;
  box-sizing: border-box;

  img {
    position: absolute;
    top: 0;
    left: 0;
  }
}

//
// Drop shadow for image.
//
@mixin ct-image-shadow($color, $direction: down, $offset-x: ct-particle(2), $offset-y: ct-particle(2)) {
  $_multiplier-x: 1;
  $_multiplier-y: 1;
  $allowed-directions: up, down, left, right, up-left, up-right, down-left, down-right;

  @if not index($allowed-directions, $direction) {
    @error "Invalid direction: #{$direction}. Allowed directions are: #{join($allowed-directions, ', ')}";
  }

  @if $direction == 'up' {
    $_multiplier-y: -1;
    $_multiplier-x: 0;
  }
  @else if $direction == 'down' {
    $_multiplier-y: 1;
    $_multiplier-x: 0;
  }
  @else if $direction == 'left' {
    $_multiplier-x: -1;
    $_multiplier-y: 0;
  }
  @else if $direction == 'right' {
    $_multiplier-x: 1;
    $_multiplier-y: 0;
  }
  @else if $direction == 'up-left' {
    $_multiplier-x: -1;
    $_multiplier-y: -1;
  }
  @else if $direction == 'up-right' {
    $_multiplier-x: 1;
    $_multiplier-y: -1;
  }
  @else if $direction == 'down-left' {
    $_multiplier-x: -1;
    $_multiplier-y: 1;
  }
  @else if $direction == 'down-right' {
    $_multiplier-x: 1;
    $_multiplier-y: 1;
  }

  // Avoid unnecessary calc functions.
  $_shadow_length_x: $offset-x;
  $_shadow_length_y: $offset-y;

  @if $_multiplier-x != 1 {
    @if type-of($offset-x) == 'string' {
      $_shadow_length_x: calc(#{$_multiplier-x} * #{$offset-x});
    }
    @else {
      $_shadow_length_x: $_multiplier-x * $offset-x;
    }
  }

  @if $_multiplier-y != 1 {
    @if type-of($offset-y) == 'string' {
      $_shadow_length_y: calc(#{$_multiplier-y} * #{$offset-y});
    }
    @else {
      $_shadow_length_y: $_multiplier-y * $offset-y;
    }
  }

  filter: drop-shadow($_shadow_length_x $_shadow_length_y 0 $color);
}

//
// String to set SVG viewbox.
//
@function ct-svg-viewbox($svg, $value) {
  @return ct-str-replace($svg, "viewBox=''", "viewBox='#{$value}'");
}
