.raizia-docmost-language {
  --raizia-language-border: var(--mantine-color-default-border, GrayText);
  --raizia-language-surface: var(--mantine-color-body, Canvas);
  --raizia-language-hover: var(--mantine-color-default-hover, Canvas);
  position: relative;
  display: flex;
  flex: 0 0 auto;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--raizia-language-border);
  border-radius: 7px;
  background: var(--raizia-language-hover);
  font-family: var(--mantine-font-family, system-ui);
}

.raizia-docmost-language > button {
  appearance: none;
  min-height: 24px;
  min-width: 29px;
  padding: 0 5px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--mantine-color-dimmed, CanvasText);
  font: 600 12px/1 var(--mantine-font-family, system-ui);
  cursor: pointer;
}

.raizia-docmost-language > button:hover,
.raizia-docmost-language > button[aria-pressed="true"] {
  color: var(--mantine-color-text, CanvasText);
  background: var(--raizia-language-surface);
}

.raizia-docmost-language > button[aria-pressed="true"] {
  box-shadow: 0 1px 2px rgb(0 0 0 / 14%);
}

.raizia-docmost-language > button:focus-visible {
  outline: 2px solid var(--mantine-primary-color-filled, Highlight);
  outline-offset: 1px;
}

.raizia-docmost-language[aria-busy="true"] > button {
  cursor: progress;
}

.raizia-docmost-language-feedback:not([hidden]) {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  right: 0;
  width: max-content;
  max-width: min(200px, 65vw);
  padding: 6px 8px;
  border: 1px solid var(--raizia-language-border);
  border-radius: 6px;
  background: var(--raizia-language-surface);
  color: var(--mantine-color-text, CanvasText);
  font-size: 12px;
}

@media (pointer: coarse) {
  .raizia-docmost-language > button {
    min-width: 40px;
    min-height: 33px;
  }
}