@mixin transition($args...) {
  transition: $args;
}

@mixin visibility {
  position: absolute;
  opacity: 0;
  transition: visibility 0s linear 0.33s, opacity 0.33s linear;

  @include customZindex(below-content);

  &.show {
    opacity: 1;

    @include customZindex(modal);

    &.list {
      @include customZindex(scroll-to-top);
    }
  }
}

@mixin slide($from, $position, $fromVal: -100%, $toVal: 0) {
  position: $position;

  @include transition(1.5s);

  #{$from}: $fromVal;

  &.show {
    #{$from}: $toVal;
  }
}

@mixin collapse($time: 0.15s, $maxHeight: 500px) {
  max-height: 0;

  @include transition(max-height $time ease-out);

  overflow: hidden;

  &.show,
  &.active {
    display: inherit;
    max-height: $maxHeight;

    @include transition(max-height $time ease-in);

    overflow-y: auto;
  }
}

@mixin collapse-full($time: 0.15s, $removeHeight: 0) {
  height: 0;

  @include transition(height $time ease-out);

  overflow: hidden;

  &.show,
  &.active {
    height: calc(100vh - #{$removeHeight});  /* NOTE standard definition (as fallback) */
    height: calc(100dvh - #{$removeHeight}); /* NOTE dynamic vh will trick iOS for newer versions */

    @include transition(height $time ease-in);
  }
}

@mixin arrow-rotate($translate: 50%, $rotate: -135deg) {
  &::after {
    transform: translateY($translate) rotate($rotate);
  }
}