// @mixin gradient-overlay -- mainly used for readability of text on media items
/// src\assets\scss\02_atoms\_gradient-overlay.scss creates the ::before element, styled here

@mixin gradient-overlay {
  // horizontal dark from left
  &--dark-from-left {
    &::before {
      background: linear-gradient(to right, rgba(15, 25, 65, 0.5), rgba(15, 25, 65, 0) 60%);
    }
  }

  // horizontal dark from right
  &--dark-from-right {
    &::before {
      background: linear-gradient(to left, rgba(15, 25, 65, 0.5), rgba(15, 25, 65, 0) 80%);
    }
  }

  // horizontal light from left
  &--light-from-left {
    &::before {
      background: linear-gradient(to right, rgba(247, 245, 240, 0.7), rgba(247, 245, 240, 0) 60%);
    }
  }

  // horizontal light from right
  &--light-from-right {
    &::before {
      background: linear-gradient(to left, rgba(247, 245, 240, 0.7), rgba(247, 245, 240, 0) 80%);
    }
  }
}