/*------------------------------------
  Transitions
------------------------------------*/
/*.g-transition {
  &-0_2 {
    transition: .2s ease-out;
  }
  &-0_3 {
    transition: .3s ease-out;
  }
  &-0_6 {
    transition: .6s ease-out;
    &-ease {
      transition: .6s ease;
    }
  }
}

[class*="g-color-"][class*="--hover"] {
  transition: color .2s ease-out;
}
[class*="g-bg-"][class*="--hover"] {
  transition: background-color .3s ease-out;
}
[class*="g-color-"][class*="--hover"][class*="g-bg-"][class*="--hover"] {
  transition: .3s ease-out;
}*/

[class*="g-transition"] {
  transition-property: all;
  transition-timing-function: ease;
  transition-delay: 0s;

  &::before,
  &::after,
  path,
  polygon {
    transition-property: all;
    transition-timing-function: ease;
    transition-delay: 0s;
  }
}

.g-transition-0_2 {
  transition-duration: .2s;

  &::before,
  &::after,
  path,
  polygon {
    transition-duration: .2s;
  }
}

.g-transition-0_3 {
  transition-duration: .3s;

  &::before,
  &::after,
  path,
  polygon {
    transition-duration: .3s;
  }
}

.g-transition-0_5 {
  transition-duration: .5s;

  &::before,
  &::after,
  path,
  polygon {
    transition-duration: .5s;
  }
}

.g-transition-0_6 {
  transition-duration: .6s;

  &::before,
  &::after,
  path,
  polygon {
    transition-duration: .6s;
  }
}

.g-transition-delay-0_11 {
  transition-delay: .11s;

  &::before,
  &::after,
  path,
  polygon {
    transition-delay: .11s;
  }
}

.g-transition-delay-0_2 {
  transition-delay: .2s;

  &::before,
  &::after,
  path,
  polygon {
    transition-delay: .2s;
  }
}

.g-transition-delay-0_45 {
  transition-delay: .45s;

  &::before,
  &::after,
  path,
  polygon {
    transition-delay: .45s;
  }
}

//
// Transition Timing Function
// .g-transition--ease {
//   transition-timing-function: ease;
// }
.g-transition--ease-out {
  transition-timing-function: ease-out;

  &::before,
  &::after,
  path,
  polygon {
    transition-timing-function: ease-out;
  }
}

.g-transition--ease-in {
  transition-timing-function: ease-in;

  &::before,
  &::after,
  path,
  polygon {
    transition-timing-function: ease-in;
  }
}

.g-transition--ease-in-out {
  transition-timing-function: ease-in-out;

  &::before,
  &::after,
  path,
  polygon {
    transition-timing-function: ease-in-out;
  }
}

.g-transition--linear {
  transition-timing-function: linear;

  &::before,
  &::after,
  path,
  polygon {
    transition-timing-function: linear;
  }
}
