body:not(.status-bar-default, .status-bar-full, .status-bar-cupertino) .status-bar {
  transition: var(--anim-duration-moderate) var(--anim-motion-baseline);
  border: none;
  transform-origin: bottom right;
  background-color: transparent;
  min-height: 8px;
  height: calc-size(auto, size);
}
body:not(.status-bar-default, .status-bar-full, .status-bar-cupertino) .status-bar::before {
  transition: var(--anim-duration-moderate) var(--anim-motion-baseline);
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 150%;
  height: 200%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(farthest-side at right bottom, var(--background-primary), rgba(var(--mono-rgb-0), 0));
}
body:not(.status-bar-default, .status-bar-full, .status-bar-cupertino) .status-bar:not(:hover) {
  transform: scale(0.8);
  opacity: 0.5;
}
body:not(.status-bar-default, .status-bar-full, .status-bar-cupertino) .status-bar:not(:hover)::before {
  opacity: 0;
}
body:is(body, .status-bar-default):not(.status-bar-full, .status-bar-cupertino) {
  .mod-sidedock.mod-right-split .workspace-tabs:last-of-type .node-insert-event,
  .mod-sidedock.mod-right-split .workspace-tabs:last-of-type .view-content {
    padding-bottom: 36px;
  }
}

// Status bar: Full width
body.status-bar-full {
  --status-bar-background: transparent;
  --status-bar-border-width: 0;
  --status-bar-position: relative;
  --status-bar-radius: 0;

  .status-bar {
    width: 100%;
  }
}

.workspace,
.horizontal-main-container {
  overflow: visible;
}

// Status bar: Cupertino
body.status-bar-cupertino .status-bar {
  --status-bar-border-width: var(--border-width);
  right: unset;
  justify-content: center;
  transition: var(--anim-duration-moderate) var(--anim-motion-baseline), background-color var(--anim-duration-moderate) ease;
  border-radius: 100vw;
  max-width: 100%;
  min-height: unset;

  > div {
    transition: var(--anim-duration-moderate) var(--anim-motion-baseline);
  }
  &:not(:hover) {
    bottom: 2px;
    border-width: 0;
    background-color: rgba(var(--mono-rgb-100), 0.2);
    padding-block: 0;
    max-width: 160px;
    height: 4px;

    > div {
      transform: scale(0.9);
      opacity: 0;
      filter: blur(16px);
      white-space: nowrap;
    }
  }
  &:hover {
    bottom: 4px;
    box-shadow: var(--shadow-s);
    border-color: var(--background-modifier-border);
    padding: 8px;
    height: 40px;

    &::before {
      transform: scaleY(1);
    }
  }

  &::before {
    position: absolute;
    transform: scaleY(10);
    z-index: -1;
    transition: var(--anim-duration-fast) var(--anim-duration-fast);
    width: 100%;
    height: 100%;
    content: "";
  }
}
