/**
 * Copyright IBM Corp. 2016, 2023
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

@use '@carbon/styles/scss/config' as *;
@use '@carbon/styles/scss/motion' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '../../globals/vars' as *;
@use '../../globals/imports' as *;

@mixin scroll-into-view {
  :root {
    --#{$c4d-prefix}--fade-in-out-delay: 0s;
  }

  $cds--slide-distance: $spacing-07;

  .#{$prefix}--fade-in {
    opacity: 1;
    transition-delay: var(--#{$c4d-prefix}--fade-in-out-delay);
    transition-duration: $duration-slow-01;
    transition-timing-function: motion(entrance, expressive);
  }

  .#{$prefix}--fade-out {
    opacity: 0;
  }

  .#{$prefix}--slide {
    &-in {
      position: relative;
      inset-block-start: 0;
      inset-inline-start: 0;
      opacity: 1;
      transition-delay: var(--#{$c4d-prefix}--fade-in-out-delay);
      transition-duration: $duration-slow-01;

      transition-timing-function: motion(entrance, expressive);
    }

    &-up {
      inset-block-start: $cds--slide-distance;
      opacity: 0;
    }

    &-up-right {
      inset-block-start: $cds--slide-distance;
      inset-inline-start: -$cds--slide-distance;
      opacity: 0;
    }

    &-right {
      inset-inline-start: -$cds--slide-distance;
      opacity: 0;
    }

    &-down-right {
      inset-block-start: -$cds--slide-distance;
      inset-inline-start: -$cds--slide-distance;
      opacity: 0;
    }

    &-down {
      inset-block-start: -$cds--slide-distance;
      opacity: 0;
    }

    &-down-left {
      inset-block-start: -$cds--slide-distance;
      inset-inline-start: $cds--slide-distance;
      opacity: 0;
    }

    &-left {
      inset-inline-start: $cds--slide-distance;
      opacity: 0;
    }

    &-up-left {
      inset-block-start: $cds--slide-distance;
      inset-inline-start: $cds--slide-distance;
      opacity: 0;
    }
  }
}