/* Transition Property */

.tp-none        { transition-property: none; }
.tp-all         { transition-property: all; }
.tp-boxShadow   { transition-property: box-shadow; }
.tp-color       { transition-property: color; }
.tp-background  { transition-property: background; }
.tp-width       { transition-property: width; }
.tp-height      { transition-property: height; }
.tp-top         { transition-property: top; }
.tp-right       { transition-property: right; }
.tp-bottom      { transition-property: bottom; }
.tp-left        { transition-property: left; }
.tp-scale       { transition-property: scale; }
.tp-transform   { transition-property: transform; }
.tp-opacity     { transition-property: opacity; }

@media (--breakpoint-1) {
  .bp1-tp-none        { transition-property: none; }
  .bp1-tp-all         { transition-property: all; }
  .bp1-tp-boxShadow   { transition-property: box-shadow; }
  .bp1-tp-color       { transition-property: color; }
  .bp1-tp-background  { transition-property: background; }
  .bp1-tp-width       { transition-property: width; }
  .bp1-tp-height      { transition-property: height; }
  .bp1-tp-top         { transition-property: top; }
  .bp1-tp-right       { transition-property: right; }
  .bp1-tp-bottom      { transition-property: bottom; }
  .bp1-tp-left        { transition-property: left; }
  .bp1-tp-scale       { transition-property: scale; }
  .bp1-tp-transform   { transition-property: transform; }
  .bp1-tp-opacity     { transition-property: opacity; }
}

@media (--breakpoint-2) {
  .bp2-tp-none        { transition-property: none; }
  .bp2-tp-all         { transition-property: all; }
  .bp2-tp-boxShadow   { transition-property: box-shadow; }
  .bp2-tp-color       { transition-property: color; }
  .bp2-tp-background  { transition-property: background; }
  .bp2-tp-width       { transition-property: width; }
  .bp2-tp-height      { transition-property: height; }
  .bp2-tp-top         { transition-property: top; }
  .bp2-tp-right       { transition-property: right; }
  .bp2-tp-bottom      { transition-property: bottom; }
  .bp2-tp-left        { transition-property: left; }
  .bp2-tp-scale       { transition-property: scale; }
  .bp2-tp-transform   { transition-property: transform; }
  .bp2-tp-opacity     { transition-property: opacity; }
}

@media (--breakpoint-3) {
  .bp3-tp-none        { transition-property: none; }
  .bp3-tp-all         { transition-property: all; }
  .bp3-tp-boxShadow   { transition-property: box-shadow; }
  .bp3-tp-color       { transition-property: color; }
  .bp3-tp-background  { transition-property: background; }
  .bp3-tp-width       { transition-property: width; }
  .bp3-tp-height      { transition-property: height; }
  .bp3-tp-top         { transition-property: top; }
  .bp3-tp-right       { transition-property: right; }
  .bp3-tp-bottom      { transition-property: bottom; }
  .bp3-tp-left        { transition-property: left; }
  .bp3-tp-scale       { transition-property: scale; }
  .bp3-tp-transform   { transition-property: transform; }
  .bp3-tp-opacity     { transition-property: opacity; }
}

@media (--breakpoint-4) {
  .bp4-tp-none        { transition-property: none; }
  .bp4-tp-all         { transition-property: all; }
  .bp4-tp-boxShadow   { transition-property: box-shadow; }
  .bp4-tp-color       { transition-property: color; }
  .bp4-tp-background  { transition-property: background; }
  .bp4-tp-width       { transition-property: width; }
  .bp4-tp-height      { transition-property: height; }
  .bp4-tp-top         { transition-property: top; }
  .bp4-tp-right       { transition-property: right; }
  .bp4-tp-bottom      { transition-property: bottom; }
  .bp4-tp-left        { transition-property: left; }
  .bp4-tp-scale       { transition-property: scale; }
  .bp4-tp-transform   { transition-property: transform; }
  .bp4-tp-opacity     { transition-property: opacity; }
}