@layer components {


  /* The drawing tools down the 3D view's left side (houses/_tools): icons, a group to a block. On hover
     (or with a tool focused) the bar widens over the scene to show each tool's name and key. */
  .toolbar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px;
    pointer-events: auto;
    background: color-mix(in oklch, var(--color-surface) 93%, transparent);
    border: 1px solid var(--color-edge);
    border-radius: 10px;
    backdrop-filter: blur(6px);
  }

  .toolbar__group {
    display: flex;
    flex-direction: column;
    gap: 2px;

    &+& {
      padding-top: 6px;
      border-top: 1px solid var(--color-line);
    }
  }

  .tool-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    color: var(--color-ink);
    background: none;
    border: 0;
    border-radius: 6px;

    &:hover {
      background: color-mix(in oklch, var(--color-surface), var(--color-ink) 14%);
    }

    &[aria-pressed="true"] {
      color: var(--color-on-primary);
      background: var(--color-primary);
    }
  }

  /* Collapsed: only the icons; the names and keys open out with the bar. */
  .tool-button__label,
  .tool-button__key {
    display: none;
    white-space: nowrap;
    line-height: 16px;
    /* the icon's height: opening out mustn't make the bar taller */
  }

  .toolbar:hover,
  .toolbar:focus-within {
    .tool-button__label {
      display: inline;
    }

    .tool-button__key {
      display: inline;
      margin-left: auto;
      line-height: 13px;
      /* with its cap's border, inside the icon's 16 px: the bar keeps its height */
      opacity: 0.7;
    }
  }

  .tool-button__icon {
    width: 16px;
    height: 16px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .controls__range {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
  }

  .controls__range {
    & input {
      flex: 1;
    }

    &.is-disabled {
      opacity: 0.4;
      pointer-events: none;
    }
  }
}