body {
  --status-bar-font-size: 13.753255px;
  --flexcyon-vim-insert-text: "INSERT";
  --flexcyon-vim-normal-text: "NORMAL";
  --flexcyon-vim-command-text: "COMMAND";
  --flexcyon-vim-bottom-positioning: -4px;
  --flexcyon-vim-left-positioning: 6px;

  --flexcyon-vim-bottom-pos-w-status: 40px;

  --flexcyon-status-hide-until-hover-text: "Show status";
  --flexcyon-status-hide-until-hover-translation: 80vw;
  --flexcyon-status-hide-hover-duration: 0.25s;
  --flexcyon-status-hide-hover-function: ease-out;
  --flexcyon-status-reading-text: "READ";
  --flexcyon-status-source-text: "SOURCE";
  --flexcyon-status-live-text: "LIVE";
  --status-bar-position: absolute;

  div:has(.cm-vim-panel) + .status-bar {
    margin-bottom: 36px;
  }
}

body.flexcyon-status-left-align {
  --flexcyon-vim-bottom-positioning: var(--flexcyon-vim-bottom-pos-w-status);

  div.status-bar {
    right: unset;
  }
}

body.flexcyon-status-centre-align {
  .status-bar {
    justify-content: center;
    display: flex;
    width: max-content;
    margin: 0 auto;
    max-width: 85%;
    right: 0;
    left: calc(16px + 6px * 2 + 4px * 2);
  }
}

body.flexcyon-status-text-enable-color {
  .plugin-editor-status[aria-label="Reading"]::before {
    color: var(--text-accent);
  }

  .plugin-editor-status[aria-label="Source mode"]::before {
    color: var(--color-purple);
  }

  .plugin-editor-status[aria-label="Live Preview"]::before {
    color: var(--color-blue);
  }
}

body.flexcyon-flex-max-mode,
body.flexcyon-status-text-mode {
  .plugin-editor-status {
    .status-bar-item-icon {
      & svg {
        display: none;
      }
    }

    &::before {
      font-weight: bold;
    }
  }

  .plugin-editor-status[aria-label="Reading"]::before {
    content: var(--flexcyon-status-reading-text);
  }

  .plugin-editor-status[aria-label="Source mode"]::before {
    content: var(--flexcyon-status-source-text);
  }

  .plugin-editor-status[aria-label="Live Preview"]::before {
    content: var(--flexcyon-status-live-text);
  }
}

body:is(
    .flexcyon-status-hide-until-hover,
    .flexcyon-status-hide-until-hold,
    .flexcyon-flex-max-mode
  )
  .status-bar {
  border: none;
  font-size: var(--font-ui-medium);
  z-index: 1;
  transform: translateX(var(--flexcyon-status-hide-until-hover-translation));
  transition: transform var(--flexcyon-status-hide-hover-duration)
    var(--flexcyon-status-hide-hover-function);

  &::before {
    font-size: var(--status-bar-font-size);
    padding: 8px 10px;
    content: var(--flexcyon-status-hide-until-hover-text);
    background-color: var(--color-base-00);
    border-radius: inherit;
    margin-right: 8px;
    position: fixed;
    bottom: 0;
    right: 0;
    transform: translateX(
      calc(-1 * var(--flexcyon-status-hide-until-hover-translation))
    );
    transition: transform var(--flexcyon-status-hide-hover-duration)
      var(--flexcyon-status-hide-hover-function);
    user-select: none;
  }
}

body:is(
    .flexcyon-status-hide-until-hover,
    .flexcyon-status-hide-until-hold,
    .flexcyon-flex-max-mode
  ).flexcyon-status-centre-align
  .status-bar {
  transform: translateX(
    calc(0.5 * var(--flexcyon-status-hide-until-hover-translation))
  );
}

body:is(
    .flexcyon-status-hide-until-hover,
    .flexcyon-status-hide-until-hold,
    .flexcyon-flex-max-mode
  ).flexcyon-status-left-align
  .status-bar {
  transform: translateX(
    calc(0 * var(--flexcyon-status-hide-until-hover-translation))
  );
}

body:is(
    .flexcyon-status-hide-until-hold,
    .flexcyon-status-hide-until-hover,
    .flexcyon-flex-max-mode
  ).flexcyon-status-centre-align
  .status-bar {
  transform: translateY(40px);
  &::before {
    position: absolute;
    justify-content: center;
    display: flex;
    width: max-content;
    margin: 0 auto;
    max-width: 85%;
    right: 0;
    left: calc(16px + 6px * 2 + 4px * 2);
    transform: translateY(-40px);
  }
}

body:is(
    .flexcyon-status-hide-until-hover,
    .flexcyon-status-hide-until-hold,
    .flexcyon-flex-max-mode
  ).flexcyon-status-left-align
  .status-bar {
  transform: translateX(
    calc(-1 * var(--flexcyon-status-hide-until-hover-translation))
  );
  &::before {
    transform: translateX(
      calc(1 * var(--flexcyon-status-hide-until-hover-translation))
    );
    right: unset;
  }
}

body.flexcyon-flex-max-mode .status-bar,
body.flexcyon-status-hide-until-hover .status-bar {
  &:hover::before {
    transform: translateY(50px);
    transition: transform var(--flexcyon-status-hide-hover-duration)
      var(--flexcyon-status-hide-hover-function);
  }

  &:hover {
    transform: unset;
    transition: transform var(--flexcyon-status-hide-hover-duration)
      var(--flexcyon-status-hide-hover-function);
  }
}

body.flexcyon-status-hide-until-hold .status-bar {
  &:active::before {
    transform: translateY(50px);
    transition: transform var(--flexcyon-status-hide-hover-duration)
      var(--flexcyon-status-hide-hover-function);
  }

  &:active {
    transform: unset;
    transition: transform var(--flexcyon-status-hide-hover-duration)
      var(--flexcyon-status-hide-hover-function);
  }
}

body.is-mobile.flexcyon-status-mobile-enabled .status-bar {
  display: block;
}

body.flexcyon-status-style-angled {
  .status-bar {
    background-color: transparent;
    border: none;
    border-radius: 0px;
    gap: 0px;
    margin: 0;
  }

  .status-bar-item {
    background-color: var(--color-base-20);
    transform: skewX(-22.5deg);
    padding: 4px 8px;
    border-radius: 0px;
  }

  .status-bar :nth-of-type(2n):is(.status-bar-item) {
    background-color: var(--color-base-05);
  }
}

body:not(.is-fullscreen) .status-bar {
  padding-right: 0;
}

body.flexcyon-status-style-card {
  .status-bar {
    border: none;
    margin: 4px 8px;
    gap: 8px;
    background-color: transparent;
    right: 10px;
  }
  .status-bar :nth-of-type(2n).status-bar-item {
    background-color: var(--color-base-05);
    border-radius: var(--flexcyon-callout-radix);
    padding: 4px 8px;
  }
  .status-bar :nth-of-type(2n + 1).status-bar-item {
    background-color: var(--color-base-25);
    border-radius: var(--flexcyon-callout-radix);
    padding: 4px 8px;
  }
}

body.flexcyon-flex-max-mode:not(:has(.mod-active > [data-type="empty"])),
body.flexcyon-status-style-pl10k:not(:has(.mod-active > [data-type="empty"])) {
  .status-bar::before {
    right: 28px;
  }
}

body.flexcyon-flex-max-mode,
body.flexcyon-status-style-pl10k {
  .status-bar {
    border: transparent;
    background-color: transparent;
    gap: 0px;
    scale: var(--expand);
    &::before {
      right: 0px;
    }

    .status-bar-item .status-bar-item-icon {
      transform: translateX(-1px);
    }
    .status-bar-item[style="display: none;"]::after {
      display: none;
    }
    .status-bar-item[style="display: none;"] + .status-bar-item {
      border-top-left-radius: 16px;
      border-bottom-left-radius: 16px;
    }

    .status-bar-item {
      padding: 0px;
      &::after {
        padding: 4px 4px;
        content: "e";
        position: relative;
        width: inherit;
        height: inherit;
        color: transparent;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 70% 50%);
      }
    }
    :first-child:empty,
    :first-child.status-bar-item {
      border-top-left-radius: 16px;
      border-bottom-left-radius: 16px;
      padding-left: 6px;
    }
    .status-bar-item:empty {
      display: flex;
    }

    :nth-of-type(2n + 1).status-bar-item {
      background-color: var(--color-base-20);

      &::after {
        background-color: var(--color-base-05);
      }
    }

    :nth-of-type(2n).status-bar-item {
      background-color: var(--color-base-05);

      &::after {
        background-color: var(--color-base-20);
      }
    }

    :last-child.status-bar-item {
      border-top-right-radius: 16px;
      border-bottom-right-radius: 16px;
      padding-right: 6px;
      margin-right: 46px;
    }
    :last-child.status-bar-item::after {
      display: none;
    }
  }
}
