.graph-controls {
  border-radius: var(--radius-s);
}
.graph-controls.is-close {
  backdrop-filter: var(--blur-l);
  border: var(--border-width) solid var(--background-modifier-border);
  background-color: rgb(from var(--background-secondary) r g b / 50%);
  padding: 0;
}
.graph-controls-button {
  padding: unset !important;
  width: 40px;
  height: 40px;
}
.graph-controls-button.mod-open {
  border-bottom: var(--border-width) solid var(--background-modifier-border);
  border-radius: 0;
}
.graph-controls-button.mod-animate {
  margin: 0 !important;
}

body:not(.is-mobile) {
  .graph-controls {
    top: 12px;
  }
}

body.is-mobile {
  .graph-controls-button {
    width: var(--view-header-height);
    height: var(--view-header-height);
  }
}
body.is-phone {
  .graph-controls {
    top: calc(var(--safe-area-inset-top) + var(--view-header-height) + var(--side-padding));
    inset-inline-end: var(--side-padding);
    max-height: 70vh;
  }
}
body.is-tablet {
  .graph-controls {
    top: var(--side-padding);
    right: var(--side-padding);
  }
}
