@layer components {

  /* One choice's buttons joined into a single control, as Blender's: a room's covering (houses/_rooms, the room
     card in houses/_inspector), how the floors show (houses/_floor_layout). Neighbours share an edge; only the
     ends are rounded. */
  .status-switch {
    display: inline-flex;
    flex: none;

    &>button {
      border-radius: 0;

      &+button {
        margin-inline-start: calc(-1 * var(--hairline));
      }

      &:first-child {
        border-start-start-radius: 4px;
        border-end-start-radius: 4px;
      }

      &:last-child {
        border-start-end-radius: 4px;
        border-end-end-radius: 4px;
      }

      /* The covering guessed, not yet confirmed (floor_designer/pipes.js): marked, not picked. */
      &.is-guess {
        outline: 1px dashed color-mix(in oklch, var(--color-primary) 80%, transparent);
        outline-offset: -3px;
      }
    }
  }
}