.codeplot-Canvas {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  &__BottomBar {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    font-size: 12px;
    background-color: var(--codeplot-surface2-backgroundColor);

    &__Version {
      display: flex;
      align-items: center;
      padding: 0 8px;
      margin-right: auto;
      opacity: 0.25;
    }

    &__RoomURL {
      display: flex;
      align-items: center;
      margin-left: auto;
      padding: 0 8px;

      &__CopyButton {
        opacity: 0.75;
        color: var(--codeplot-surface2-color);
        margin-left: 2px;
        padding: 2px 4px;
        border-radius: 4px;
        &:hover {
          background-color: var(--codeplot-surface3-backgroundColor);
        }
        &:focus {
          background-color: var(--codeplot-surface2-backgroundColor);
          outline: none;
        }
      }
    }
  }
}

/* -------------------------------------------------------------------------- */
/*                              Tldraw Overrides                              */
/* -------------------------------------------------------------------------- */
.tlui-toolbar__extras {
  display: none;
}

button[data-tool="asset"] {
  display: none;
}

.tlui-toolbar__tools {
  justify-content: center;
  width: fit-content;
}

/* button[title="Styles"] {
  display: none;
} */
