/* reset */
/* a,
button {
  all: unset;
} */

.ToolbarRoot {
  z-index: 1000;
  font-family: var(--edgebrix-font-family, inherit);
  padding: var(--edgebrix-toolbar-padding, 6px 10px);
  min-height: var(--edgebrix-toolbar-height, 32px);
  display: flex;
  /* padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 10px;
  padding-right: 10px; */
  /* width: 100%; */
  margin-top: 2px;
  margin-bottom: 2px;
  min-width: 150px;
  border-radius: 6px;
  background-color: var(
    --edgebrix-toolbar-background-color,
    var(--edgebrix-color-base, white)
  );
  box-shadow: 0 2px 10px var(--blackA7);
  min-width: fit-content;
  max-width: fit-content;
}

.ToolbarOther,
.ToolbarItem {
  flex: 0 0 auto;
  background-color: var(
    --edgebrix-toolbar-button-background-color,
    transparent
  );
  color: var(--edgebrix-toolbar-button-text-color, black);
  height: var(--edgebrix-toolbar-button-height, 32px);
  padding-left: 8px;
  padding-right: 8px;
  display: inline-flex;
  font-size: var(--edgebrix-font-size, 14px);
  font-weight: 500;

  line-height: 1;
  border-radius: var(--edgebrix-toolbar-button-radius, 4px);
  align-items: center;
  justify-content: center;
}
.ToolbarItem:hover {
  color: var(--edgebrix-toolbar-button-text-color--hover, black);
  background-color: var(
    --edgebrix-toolbar-button-background-color--hover,
    transparent
  );
}
p.ToolbarLink {
  overflow: hidden;
  white-space: nowrap;
}

.ToolbarToggleItem,
.ToolbarLink,
.ToolbarButton {
  flex: 0 0 auto;

  color: var(--edgebrix-toolbar-button-text-color, black);
  height: var(--edgebrix-toolbar-button-height, 32px);
  padding: 6px 8px;
  border-radius: var(--edgebrix-toolbar-button-radius, 4px);
  display: inline-flex;
  font-size: var(--edgebrix-font-size, 14px);
  line-height: 1;
  align-items: center;
  justify-content: center;
}
.ToolbarToggleItem:hover,
.ToolbarLink:hover {
  color: var(--edgebrix-toolbar-button-text-color--hover, black);
  background-color: var(
    --edgebrix-toolbar-button-background-color--hover,
    transparent
  );
  color: var(--violet11);
}
.ToolbarToggleItem:focus,
.ToolbarLink:focus,
.ToolbarButton:focus {
  position: relative;
  box-shadow: 0 0 0 2px var(--violet7);
}

.ToolbarToggleItem {
  background-color: white;
  margin-left: 2px;
}
.ToolbarToggleItem:first-child {
  margin-left: 0;
}
.ToolbarToggleItem[data-state="on"] {
  background-color: var(--violet5);
  color: var(--violet11);
}

.ToolbarSeparator {
  width: 1px;
  background-color: var(--edgebrix-toolbar-sperator-color, #bcbcbc);
}

.ToolbarLink:hover {
  background-color: transparent;
  cursor: pointer;
}

.ToolbarLogo {
  flex: 0 0 auto;
  background-color: transparent;
  height: var(--edgebrix-toolbar-logo-height, 32px);
  padding: 6px 8px;
  display: inline-flex;
}

.ToolbarButton {
  padding-left: 10px;
  padding-right: 10px;
  color: rgb(0, 0, 0);
  background-color: pink;
}
.ToolbarButton:hover {
  background-color: red;
}

.SeparatorRoot {
  background-color: var(--edgebrix-toolbar-sperator-color, #bcbcbc);
}
.SeparatorRoot[data-orientation="horizontal"] {
  height: 1px;
  width: 100%;
}
.SeparatorRoot[data-orientation="vertical"] {
  height: 100%;
  width: 1px;
}

.box {
  background-color: var(--edgebrix-toolbar-background-color, black);
  width: 52px;
  height: 52px;
  border-radius: 6px;
}

.AvatarRoot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  overflow: hidden;
  user-select: none;
  width: 28px;
  height: 28px;
  border-radius: 100%;
  background-color: var(--blackA3);
}

.AvatarImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.AvatarFallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  color: var(--violet11);
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
}
