/* Built-in animations here, for internal use only thus mixins and not extendable classes, for other animation purposes see animations from plugins!!! */

// for clicking effect on components eg. buttons
@mixin animation-clickin {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgb(0 0 0 / 0%);

  &:focus,
  &:active {
    -webkit-animation-name: on-hover-push;
    animation-name: on-hover-push;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
  }
}

// links animation class i.e @extend .underline-from-center
.underline-from-center {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgb(0 0 0 / 0%);
  position: relative;
  overflow: hidden;

  &:before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 51%;
    right: 51%;
    bottom: 0;
    background: currentColor;
    height: 2px;
    transition-property: left, right;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
  }

  // &:hover,
  &:focus,
  &:active {
    &:before {
      left: 0;
      right: 0;
    }
  }
}