.canvas-wrapper {
  --shadow-stationary: 0px 1px 2px rgba(0, 0, 0, 0.028), 0px 3.4px 6.7px rgba(0, 0, 0, 0.042), 0px 15px 30px rgba(0, 0, 0, 0.07);
}

.canvas-control-group {
  backdrop-filter: var(--blur-l);
  box-shadow: none;
  border-width: var(--border-width);
  background-color: rgb(from var(--background-secondary) r g b / 50%);
}

.canvas-control-item {
  --icon-size: var(--icon-m);
  background-color: transparent;
  width: 40px;
  height: 40px;
}

.canvas-card-menu {
  gap: 8px;
  backdrop-filter: var(--blur-l);
  box-shadow: none;
  border: var(--border-width) solid var(--background-modifier-border);
  background-color: rgb(from var(--background-secondary) r g b / 50%) !important;
  padding: 8px;
}

.canvas-card-menu-button {
  border-radius: var(--input-radius);
  padding: 16px;

  &:hover {
    background-color: var(--background-modifier-hover);
  }
}

.canvas-node-container {
  border: var(--border-width) solid var(--background-modifier-border);
  background-color: var(--background-secondary);
}
.canvas-node-label {
  left: 2px;
  transition: var(--anim-duration-fast);
}

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

body.is-mobile {
  .canvas-control-item {
    width: var(--view-header-height);
    height: var(--view-header-height);
  }
}
body.is-phone {
  .canvas-controls {
    top: calc(var(--safe-area-inset-top) + var(--view-header-height) + var(--side-padding));
    right: var(--side-padding);
  }
}
body.is-tablet {
  .canvas-controls {
    top: var(--side-padding);
    right: var(--side-padding);
  }
}
