@use '@gear-js/ui/mixins' as *;
@use './variables' as *;

@keyframes loading {
  from {
    transform: translate(-37.5%);
  }
  to {
    transform: translate(37.5%);
  }
}

//for css transition
@mixin fade($fadeDelay: 0ms, $fadeDuration: $timeout, $triming-function: linear) {
  &:global(.exit),
  &:global(.enter-done) {
    opacity: 1;
  }

  &:global(.exit),
  &:global(.enter) {
    // remove possible transition from elements
    transition: none;
  }

  &:global(.enter),
  &:global(.exit-done) {
    opacity: 0;
  }

  &:global(.enter-active) {
    opacity: 1;
  }

  &:global(.exit-active) {
    opacity: 0;
  }

  &:global(.exit-active),
  &:global(.enter-active) {
    transition: opacity $fadeDuration $triming-function $fadeDelay;
  }
}

//for css transition
@mixin fadeAppear($fadeDelay: 0ms, $fadeDuration: $timeout, $triming-function: linear) {
  &:global(.appear) {
    opacity: 0;
  }

  &:global(.appear-done),
  &:global(.enter-done) {
    opacity: 1;
  }

  &:global(.appear-active) {
    opacity: 1 !important;
  }

  &:global(.appear-active) {
    transition: opacity $fadeDuration $triming-function $fadeDelay;
  }
}

@mixin loading($colorFrom: $bgColorSecondary, $colorTo: $bgColorTertiary) {
  overflow: hidden;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    inset: 0 -150%;
    background: linear-gradient(
      90deg,
      rgba($bgColorSecondary, 0.1) 25%,
      rgba($bgColorTertiary, 0.24) 37%,
      rgba($bgColorSecondary, 0.1) 63%
    );
    animation: loading $bigTimeout ease infinite;
  }
}

@mixin expand($startHeight, $contentHeight: var(--offset-height), $duration: $timeout) {
  $endHeight: calc($contentHeight + $startHeight);

  overflow: hidden;

  &:global(.enter) {
    height: $startHeight;
    overflow: hidden;
  }

  &:global(.enter-active) {
    height: $endHeight;
  }

  &:global(.enter-done) {
    height: $endHeight;
  }

  &:global(.exit) {
    height: $endHeight;
    overflow: hidden;
  }

  &:global(.exit-active) {
    height: $startHeight;
  }

  &:global(.exit-done) {
    height: $startHeight;
  }

  &:global(.exit-active),
  &:global(.enter-active) {
    @include transition();
  }
}