@import "../../styles/common";

.root {
  $w: 150px;
  $p: 10px;

  background: var(--swh-top-bar-bg);
  border-bottom: 1px solid var(--swh-border-color-0);
  display: flex;
  width: 100%;
  padding: 0 $p;
  align-items: center;
  align-content: center;
  -webkit-user-select: none;

  .title {
    max-width: calc(100vw - ($w + $p) * 2);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 auto;
  }
}

.title_wrapper {
  width: 100%;
  height: 100%;
  display: flex;

  @include win-drag;
}

.left, .right {
}

.left {
  left: 10px;
}

.right {
  right: 10px;
}

:global(.platform-darwin) {
  .root {
    padding-left: 80px;
  }
}


.read_only {
  color: var(--swh-font-color-weak);
  background-color: var(--swh-top-bar-read-only-bg);
  border-radius: var(--swh-border-radius);
  font-size: 10px;
  padding: 2px 6px;
}
