/**
 * "FEP-c16b: Formatting MFM functions" attributes that Akkoma supports
 */

.StatusContent:not(.mfm-disabled) {
  /* The following are the non-animated MFM */
  .mfm-center {
    display: block;
    text-align: center;
  }

  .mfm-flip {
    display: inline-block;
    transform: scaleX(-1);
  }

  .mfm-flip[data-mfm-v] {
    transform: scaleY(-1);
  }

  .mfm-flip[data-mfm-v][data-mfm-h] {
    transform: scale(-1, -1);
  }

  .mfm-font[data-mfm-serif] {
    font-family: serif;
  }

  .mfm-font[data-mfm-monospace] {
    font-family: monospace;
  }

  .mfm-font[data-mfm-cursive] {
    font-family: cursive;
  }

  .mfm-font[data-mfm-fantasy] {
    font-family: fantasy;
  }

  .mfm-font[data-mfm-emoji] {
    font-family: emoji;
  }

  .mfm-font[data-mfm-math] {
    font-family: math;
  }

  .mfm-blur {
    filter: blur(6px);
    transition: filter 0.3s;

    &:hover {
      filter: blur(0);
    }
  }

  .mfm-rotate {
    display: inline-block;
    transform: rotate(calc(var(--mfm-deg, 90) * 1deg));
    transform-origin: center center;
  }

  .mfm-x2 {
    --mfm-zoom-size: 200%;
  }

  .mfm-x3 {
    --mfm-zoom-size: 400%;
  }

  .mfm-x4 {
    --mfm-zoom-size: 600%;
  }

  .mfm-x2,
  .mfm-x3,
  .mfm-x4,
  .mfm-tada {
    .emoji {
      --emoji-size: 2em;
    }
    font-size: var(--mfm-zoom-size);

    .mfm-x2,
    .mfm-x3,
    .mfm-x4,
    .mfm-tada {
      /* only half effective */
      font-size: calc(var(--mfm-zoom-size) / 2 + 50%);

      .mfm-x2,
      .mfm-x3,
      .mfm-x4,
      .mfm-tada {
        /* disabled */
        font-size: 100%;
      }
    }
  }

  .mfm-position {
    display: inline-block;
    transform: translate(calc(var(--mfm-x, 0) * 1em), calc(var(--mfm-y, 0) * 1em));
  }

  .mfm-scale {
    display: inline-block;
    transform: scale(var(--mfm-x, 1), var(--mfm-y, 1));
  }

  .mfm-fg {
    color: var(--mfm-color, #f00);
  }

  .mfm-bg {
    background-color: var(--mfm-color, #0f0);
  }

  /* The following are the animated MFM */

  /* .mfm-hover means that we should only play animation when hovering over the StatusContent
   * So either StatusContent does not have this class,
   * or it has the class and we are hovering over StatusContent
   */
  &:not(.mfm-hover:not(:hover)) {
    .mfm-jelly {
      display: inline-block;
      animation: mfm-rubberBand var(--mfm-speed, 1s) linear infinite both;
    }

    .mfm-twitch {
      display: inline-block;
      animation: mfm-twitch var(--mfm-speed, 0.5s) ease infinite;
    }

    .mfm-shake {
      display: inline-block;
      animation: mfm-shake var(--mfm-speed, 0.5s) ease infinite;
    }

    .mfm-spin {
      display: inline-block;
      animation: mfm-spin var(--mfm-speed, 1.5s) linear infinite;
    }

    .mfm-spin[data-mfm-y] {
      animation-name: mfm-spinY;
    }

    .mfm-spin[data-mfm-x] {
      animation-name: mfm-spinX;
    }

    .mfm-spin[data-mfm-alternate] {
      animation-direction: alternate;
    }

    .mfm-spin[data-mfm-left] {
      animation-direction: reverse;
    }

    .mfm-jump {
      display: inline-block;
      animation: mfm-jump var(--mfm-speed, 0.75s) linear infinite;
    }

    .mfm-bounce {
      display: inline-block;
      animation: mfm-bounce var(--mfm-speed, 0.75s) linear infinite;
      transform-origin: center bottom;
    }

    .mfm-rainbow {
      animation: mfm-rainbow var(--mfm-speed, 1s) linear infinite;
    }

    .mfm-tada {
      display: inline-block;
      animation: mfm-tada var(--mfm-speed, 1s) linear infinite both;

      --mfm-zoom-size: 150%;
    }
  }

  /* animation keyframes */

  @keyframes mfm-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  @keyframes mfm-spinX {
    0% { transform: perspective(128px) rotateX(0deg); }
    100% { transform: perspective(128px) rotateX(360deg); }
  }

  @keyframes mfm-spinY {
    0% { transform: perspective(128px) rotateY(0deg); }
    100% { transform: perspective(128px) rotateY(360deg); }
  }

  @keyframes mfm-jump {
    0% { transform: translateY(0); }
    25% { transform: translateY(-16px); }
    50% { transform: translateY(0); }
    75% { transform: translateY(-8px); }
    100% { transform: translateY(0); }
  }

  @keyframes mfm-bounce {
    0% { transform: translateY(0) scale(1, 1); }
    25% { transform: translateY(-16px) scale(1, 1); }
    50% { transform: translateY(0) scale(1, 1); }
    75% { transform: translateY(0) scale(1.5, 0.75); }
    100% { transform: translateY(0) scale(1, 1); }
  }

  @keyframes mfm-twitch {
    0% { transform: translate(7px, -2px); }
    5% { transform: translate(-3px, 1px); }
    10% { transform: translate(-7px, -1px); }
    15% { transform: translate(0, -1px); }
    20% { transform: translate(-8px, 6px); }
    25% { transform: translate(-4px, -3px); }
    30% { transform: translate(-4px, -6px); }
    35% { transform: translate(-8px, -8px); }
    40% { transform: translate(4px, 6px); }
    45% { transform: translate(-3px, 1px); }
    50% { transform: translate(2px, -10px); }
    55% { transform: translate(-7px, 0); }
    60% { transform: translate(-2px, 4px); }
    65% { transform: translate(3px, -8px); }
    70% { transform: translate(6px, 7px); }
    75% { transform: translate(-7px, -2px); }
    80% { transform: translate(-7px, -8px); }
    85% { transform: translate(9px, 3px); }
    90% { transform: translate(-3px, -2px); }
    95% { transform: translate(-10px, 2px); }
    100% { transform: translate(-2px, -6px); }
  }

  @keyframes mfm-shake {
    0% { transform: translate(-3px, -1px) rotate(-8deg); }
    5% { transform: translate(0, -1px) rotate(-10deg); }
    10% { transform: translate(1px, -3px) rotate(0deg); }
    15% { transform: translate(1px, 1px) rotate(11deg); }
    20% { transform: translate(-2px, 1px) rotate(1deg); }
    25% { transform: translate(-1px, -2px) rotate(-2deg); }
    30% { transform: translate(-1px, 2px) rotate(-3deg); }
    35% { transform: translate(2px, 1px) rotate(6deg); }
    40% { transform: translate(-2px, -3px) rotate(-9deg); }
    45% { transform: translate(0, -1px) rotate(-12deg); }
    50% { transform: translate(1px, 2px) rotate(10deg); }
    55% { transform: translate(0, -3px) rotate(8deg); }
    60% { transform: translate(1px, -1px) rotate(8deg); }
    65% { transform: translate(0, -1px) rotate(-7deg); }
    70% { transform: translate(-1px, -3px) rotate(6deg); }
    75% { transform: translate(0, -2px) rotate(4deg); }
    80% { transform: translate(-2px, -1px) rotate(3deg); }
    85% { transform: translate(1px, -3px) rotate(-10deg); }
    90% { transform: translate(1px, 0) rotate(3deg); }
    95% { transform: translate(-2px, 0) rotate(-3deg); }
    100% { transform: translate(2px, 1px) rotate(2deg); }
  }

  @keyframes mfm-rubberBand {
    0% { transform: scale3d(1, 1, 1); }
    30% { transform: scale3d(1.25, 0.75, 1); }
    40% { transform: scale3d(0.75, 1.25, 1); }
    50% { transform: scale3d(1.15, 0.85, 1); }
    65% { transform: scale3d(0.95, 1.05, 1); }
    75% { transform: scale3d(1.05, 0.95, 1); }
    100% { transform: scale3d(1, 1, 1); }
  }

  @keyframes mfm-rainbow {
    0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
    100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
  }

  @keyframes mfm-tada {
    0%,
    100% { transform: scale3d(1, 1, 1); }

    10%,
    20% { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }

    30%,
    50%,
    70%,
    90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }

    40%,
    60%,
    80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  }

  /**
   * Legacy MFM
   * This is for backwards compatibility with posts formatted on Akkoma before support for FEP-c16b
   * Note that it uses the keyframes as defined above for the FEP-c16b compatible MFM representation
   */

  .mfm {
    display: inline-block;
  }

  /* The following are the legacy non-animated MFM */
  ._mfm_flip_[data-h][data-v] {
    transform: scale(-1, -1);
  }

  ._mfm_flip_[data-v] {
    transform: scaleY(-1);
  }

  ._mfm_flip_:not([data-v]) {
    transform: scaleX(-1);
  }

  ._mfm_x2_ {
    font-size: 200%;
  }

  ._mfm_x3_ {
    font-size: 400%;
  }

  ._mfm_x4_ {
    font-size: 600%;
  }

  ._mfm_x2_ {
    .emoji {
      height: 100px;
    }
  }

  ._mfm_x3_ {
    .emoji {
      height: 150px;
    }
  }

  ._mfm_x4_ {
    .emoji {
      height: 200px;
    }
  }

  ._mfm_blur_ {
    filter: blur(6px);
    transition: filter 0.3s;
  }

  ._mfm_blur_:hover {
    filter: blur(0);
  }

  ._mfm_rotate_ {
    transform: rotate(90deg);
    transform-origin: center center;
  }

  /* The following are the legacy animated MFM */

  /* .mfm-hover means that we should only play animation when hovering over the StatusContent
   * So either StatusContent does not have this class,
   * or it has the class and we are hovering over StatusContent
   */
  &:not(.mfm-hover:not(:hover)) {
    ._mfm_tada_ {
      font-size: 150%;
      animation: mfm-tada 1s linear infinite both;
    }

    ._mfm_jelly_ {
      animation: mfm-rubberBand 1s linear infinite both;
    }

    ._mfm_twitch_ {
      animation: mfm-twitch 0.5s ease infinite;
    }

    ._mfm_shake_ {
      animation: mfm-shake 0.5s ease infinite;
    }

    ._mfm_spin_ {
      animation: mfm-spin 0.5s linear infinite;
    }

    ._mfm_spin_[data-x] {
      animation-name: mfm-spinX;
    }

    ._mfm_spin_[data-y] {
      animation-name: mfm-spinY;
    }

    ._mfm_spin_[left] {
      animation-direction: reverse;
    }

    ._mfm_spin_[alternate] {
      animation-direction: alternate;
    }

    ._mfm_jump_ {
      animation: mfm-jump 0.75s linear infinite;
    }

    ._mfm_bounce_ {
      animation: mfm-bounce 0.75s linear infinite;
      transform-origin: center bottom;
    }

    ._mfm_rainbow_ {
      animation: mfm-rainbow 1s linear infinite;
    }
  }
}