.i18n-devtool { --i18n-devtool-background: #f7f7f8; --i18n-devtool-border: rgb(15 23 42 / 14%); --i18n-devtool-foreground: #18181b; --i18n-devtool-muted: #71717a; --i18n-devtool-panel: #fff; --i18n-devtool-primary: #2563eb; --i18n-devtool-control-hover: rgb(15 23 42 / 6%); --i18n-devtool-control-pressed: rgb(15 23 42 / 11%); position: fixed; z-index: 2147483647; color: var(--i18n-devtool-foreground); color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .i18n-devtool[data-dark] { --i18n-devtool-background: #111318; --i18n-devtool-border: rgb(255 255 255 / 14%); --i18n-devtool-foreground: #f4f4f5; --i18n-devtool-muted: #a1a1aa; --i18n-devtool-panel: #181a20; --i18n-devtool-primary: #60a5fa; --i18n-devtool-control-hover: rgb(255 255 255 / 8%); --i18n-devtool-control-pressed: rgb(255 255 255 / 14%); color-scheme: dark; } .i18n-devtool *, .i18n-devtool *::before, .i18n-devtool *::after { box-sizing: border-box; } .i18n-devtool button, .i18n-devtool select { color: inherit; font: inherit; } .i18n-devtool__trigger { position: fixed; right: 1rem; bottom: 1rem; display: inline-flex; width: max-content; height: 3rem; align-items: center; gap: 0.5rem; justify-content: center; overflow: visible; padding: 0 0.5rem; border: 1px solid var(--i18n-devtool-border); border-radius: 999px; background: var(--i18n-devtool-panel); box-shadow: 0 12px 30px rgb(0 0 0 / 18%); cursor: pointer; font-size: 0.8125rem; font-weight: 650; touch-action: none; transition: gap 140ms ease, border-radius 140ms ease, background-color 120ms ease, box-shadow 140ms ease, transform 160ms ease; user-select: none; } .i18n-devtool__trigger::before { position: absolute; display: none; content: ""; } .i18n-devtool__trigger[hidden] { display: none; } .i18n-devtool__trigger:focus-visible { outline: 2px solid var(--i18n-devtool-primary); outline-offset: 2px; } .i18n-devtool__trigger[data-dragging] { cursor: grabbing; box-shadow: 0 16px 36px rgb(0 0 0 / 24%); } .i18n-devtool__trigger:hover { background: color-mix( in srgb, var(--i18n-devtool-primary) 7%, var(--i18n-devtool-panel) ); } .i18n-devtool__trigger:active { background: color-mix( in srgb, var(--i18n-devtool-primary) 12%, var(--i18n-devtool-panel) ); } .i18n-devtool__trigger[data-collapsed] { gap: 0; } .i18n-devtool__trigger[data-dock="left"] { border-top-left-radius: 0; border-bottom-left-radius: 0; } .i18n-devtool__trigger[data-dock="right"] { border-top-right-radius: 0; border-bottom-right-radius: 0; } .i18n-devtool__trigger[data-dock="top"] { border-top-left-radius: 0; border-top-right-radius: 0; } .i18n-devtool__trigger[data-dock="bottom"] { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .i18n-devtool__trigger[data-dock]:not([data-collapsed]) { border-radius: 999px; } .i18n-devtool__trigger[data-dock="left"]:not([data-collapsed]) { transform: translateX(0.5rem); } .i18n-devtool__trigger[data-dock="right"]:not([data-collapsed]) { transform: translateX(-0.5rem); } .i18n-devtool__trigger[data-dock="top"]:not([data-collapsed]) { transform: translateY(0.5rem); } .i18n-devtool__trigger[data-dock="bottom"]:not([data-collapsed]) { transform: translateY(-0.5rem); } .i18n-devtool__trigger[data-dock="left"]:not([data-collapsed])::before { inset-block: 0; right: 100%; display: block; width: 0.5rem; } .i18n-devtool__trigger[data-dock="right"]:not([data-collapsed])::before { inset-block: 0; left: 100%; display: block; width: 0.5rem; } .i18n-devtool__trigger[data-dock="top"]:not([data-collapsed])::before { bottom: 100%; inset-inline: 0; display: block; height: 0.5rem; } .i18n-devtool__trigger[data-dock="bottom"]:not([data-collapsed])::before { top: 100%; inset-inline: 0; display: block; height: 0.5rem; } .i18n-devtool__trigger-icon { display: grid; width: 2rem; height: 2rem; flex: 0 0 2rem; place-items: center; border-radius: 50%; background: var(--i18n-devtool-primary); color: white; } .i18n-devtool__trigger-icon svg { display: block; width: 1.25rem; height: 1.25rem; stroke-width: 2.25; } .i18n-devtool__trigger-label { width: 2.5rem; max-width: 2.5rem; overflow: hidden; opacity: 1; transform: translateX(0); transition: max-width 140ms ease, opacity 100ms ease, transform 140ms ease; white-space: nowrap; } .i18n-devtool__trigger[data-collapsed] .i18n-devtool__trigger-label { max-width: 0; opacity: 0; transform: translateX(-0.35rem); } .i18n-devtool__panel { position: fixed; top: 1rem; bottom: 1rem; display: flex; width: min(80rem, calc(100vw - 2rem)); overflow: hidden; flex-direction: column; border: 1px solid var(--i18n-devtool-border); border-radius: 1rem; outline: none; background: var(--i18n-devtool-background); box-shadow: 0 24px 70px rgb(0 0 0 / 28%); } .i18n-devtool__panel[data-placement="left"] { right: auto; left: 1rem; } .i18n-devtool__panel[data-placement="center"] { right: auto; left: 50%; transform: translateX(-50%); } .i18n-devtool__panel[data-placement="right"] { right: 1rem; left: auto; } .i18n-devtool[data-mode="standalone"] { inset: 0; } .i18n-devtool[data-mode="standalone"] .i18n-devtool__panel { inset: 0; width: 100vw; border: 0; border-radius: 0; box-shadow: none; transform: none; } .i18n-devtool__panel[data-fullscreen] { inset: 0; width: 100vw; border: 0; border-radius: 0; box-shadow: none; transform: none; } .i18n-devtool__header { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--i18n-devtool-border); background: var(--i18n-devtool-panel); } .i18n-devtool__header h2, .i18n-devtool__eyebrow { margin: 0; } .i18n-devtool__header h2 { font-size: 1rem; } .i18n-devtool__eyebrow { margin-bottom: 0.1rem; color: var(--i18n-devtool-muted); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .i18n-devtool__controls { display: flex; align-items: end; gap: 1rem; } .i18n-devtool__locale-field, .i18n-devtool__source-locale-field, .i18n-devtool__action-field { display: grid; gap: 0.2rem; } .i18n-devtool__action-field { min-width: 0; margin: 0; padding: 0; border: 0; } .i18n-devtool__locale-field > span, .i18n-devtool__source-locale-field > span, .i18n-devtool__action-field > legend { padding: 0; color: var(--i18n-devtool-muted); font-size: 0.625rem; font-weight: 650; text-transform: uppercase; } .i18n-devtool__source-locale { display: inline-flex; min-width: 7rem; height: 2.25rem; align-items: center; padding: 0 0.7rem; border: 1px solid var(--i18n-devtool-border); border-radius: 0.55rem; background: color-mix( in srgb, var(--i18n-devtool-panel) 82%, var(--i18n-devtool-muted) 18% ); color: var(--i18n-devtool-muted); white-space: nowrap; } .i18n-devtool__action-controls { display: flex; align-items: center; gap: 0.4rem; } .i18n-devtool__action-button { display: grid; place-items: center; } .i18n-devtool__action-button > span { grid-area: 1 / 1; } .i18n-devtool__action-label-measure { visibility: hidden; } .i18n-devtool__select, .i18n-devtool__action-controls > button, .i18n-devtool__settings-trigger { height: 2.25rem; padding: 0 0.7rem; border: 1px solid var(--i18n-devtool-border); border-radius: 0.55rem; outline: none; background: var(--i18n-devtool-panel); transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease; } .i18n-devtool__select { color: var(--i18n-devtool-foreground); cursor: pointer; } .i18n-devtool__locale-select { min-width: 9rem; } .i18n-devtool__action-controls > button, .i18n-devtool__settings-trigger { cursor: pointer; } .i18n-devtool__select:hover, .i18n-devtool__action-controls > button:hover:not(:disabled), .i18n-devtool__settings-trigger:hover { background: var(--i18n-devtool-control-hover); } .i18n-devtool__select:focus-visible, .i18n-devtool__action-controls > button:focus-visible, .i18n-devtool__settings-trigger:focus-visible { border-color: var(--i18n-devtool-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--i18n-devtool-primary) 18%, transparent); } .i18n-devtool__action-controls > button:active:not(:disabled), .i18n-devtool__settings-trigger:active { background: var(--i18n-devtool-control-pressed); transform: translateY(1px); } .i18n-devtool__action-controls > button:disabled { cursor: default; opacity: 0.45; } .i18n-devtool__controls .i18n-devtool__close, .i18n-devtool__controls .i18n-devtool__fullscreen { display: inline-grid; width: 2.25rem; place-items: center; padding: 0; } .i18n-devtool__close svg, .i18n-devtool__fullscreen svg { width: 1rem; height: 1rem; } .i18n-devtool__fullscreen[aria-pressed="true"] { border-color: color-mix( in srgb, var(--i18n-devtool-primary) 45%, var(--i18n-devtool-border) ); background: color-mix( in srgb, var(--i18n-devtool-primary) 12%, var(--i18n-devtool-panel) ); color: var(--i18n-devtool-primary); } .i18n-devtool__theme-switcher { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem; padding: 0.25rem; border: 1px solid var(--i18n-devtool-border); border-radius: 0.625rem; background: var(--i18n-devtool-panel); } .i18n-devtool__theme-switcher button { display: inline-flex; min-width: 0; height: 2.25rem; align-items: center; justify-content: center; gap: 0.375rem; padding: 0 0.5rem; border: 0; border-radius: 0.375rem; outline: none; background: transparent; color: var(--i18n-devtool-muted); cursor: pointer; transition: color 120ms ease, background-color 120ms ease, transform 80ms ease; } .i18n-devtool__theme-switcher button:hover { background: var(--i18n-devtool-control-hover); color: var(--i18n-devtool-foreground); } .i18n-devtool__theme-switcher button:active { transform: scale(0.94); } .i18n-devtool__theme-switcher button:focus-visible { box-shadow: 0 0 0 2px var(--i18n-devtool-primary); } .i18n-devtool__theme-switcher button[aria-pressed="true"] { background: color-mix( in srgb, var(--i18n-devtool-primary) 14%, var(--i18n-devtool-panel) ); color: var(--i18n-devtool-primary); } .i18n-devtool__theme-switcher svg { width: 1rem; height: 1rem; flex: 0 0 1rem; } .i18n-devtool__theme-switcher span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .i18n-devtool__settings { position: relative; align-self: end; } .i18n-devtool__settings-trigger { display: inline-grid; width: 2.25rem; place-items: center; padding: 0; } .i18n-devtool__settings-trigger svg { width: 1rem; height: 1rem; } .i18n-devtool__settings-trigger[aria-expanded="true"] { border-color: color-mix( in srgb, var(--i18n-devtool-primary) 45%, var(--i18n-devtool-border) ); background: color-mix( in srgb, var(--i18n-devtool-primary) 12%, var(--i18n-devtool-panel) ); color: var(--i18n-devtool-primary); } .i18n-devtool__settings-panel { position: absolute; z-index: 5; top: calc(100% + 0.5rem); right: 0; display: grid; width: 20rem; max-width: calc(100vw - 3rem); gap: 1rem; padding: 1rem; border: 1px solid var(--i18n-devtool-border); border-radius: 0.875rem; background: var(--i18n-devtool-panel); box-shadow: 0 18px 48px rgb(0 0 0 / 22%); } .i18n-devtool__settings-field { display: grid; gap: 0.45rem; } .i18n-devtool__settings-field > span { color: var(--i18n-devtool-muted); font-size: 0.675rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .i18n-devtool__settings-panel .i18n-devtool__select { width: 100%; height: 2.75rem; border-radius: 0.625rem; } .i18n-devtool__settings-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem; padding: 0.25rem; border: 1px solid var(--i18n-devtool-border); border-radius: 0.625rem; background: var(--i18n-devtool-panel); } .i18n-devtool__settings-options button { display: inline-flex; min-width: 0; height: 2.25rem; align-items: center; justify-content: center; gap: 0.375rem; padding: 0 0.5rem; border: 0; border-radius: 0.375rem; outline: none; background: transparent; color: var(--i18n-devtool-muted); cursor: pointer; transition: color 120ms ease, background-color 120ms ease, transform 80ms ease; } .i18n-devtool__settings-options button:hover { background: var(--i18n-devtool-control-hover); color: var(--i18n-devtool-foreground); } .i18n-devtool__settings-options button:active { transform: scale(0.97); } .i18n-devtool__settings-options button:focus-visible { box-shadow: 0 0 0 2px var(--i18n-devtool-primary); } .i18n-devtool__settings-options button[aria-pressed="true"] { background: color-mix( in srgb, var(--i18n-devtool-primary) 14%, var(--i18n-devtool-panel) ); color: var(--i18n-devtool-primary); } .i18n-devtool__settings-options svg { width: 1rem; height: 1rem; flex: 0 0 1rem; } .i18n-devtool__output { border-bottom: 1px solid var(--i18n-devtool-border); background: color-mix( in srgb, var(--i18n-devtool-primary) 10%, var(--i18n-devtool-panel) ); } .i18n-devtool__output[data-error] { background: color-mix(in srgb, #ef4444 12%, var(--i18n-devtool-panel)); color: #ef4444; } .i18n-devtool__output-header { display: flex; min-height: 2.25rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.25rem 0.5rem 0.25rem 1rem; color: var(--i18n-devtool-muted); font-size: 0.7rem; font-weight: 650; text-transform: uppercase; } .i18n-devtool__output-header > span, .i18n-devtool__output-header > div { display: inline-flex; align-items: center; gap: 0.375rem; } .i18n-devtool__output-header button { display: inline-grid; width: 1.75rem; height: 1.75rem; place-items: center; padding: 0; border: 0; border-radius: 0.375rem; outline: none; background: transparent; color: inherit; cursor: pointer; } .i18n-devtool__output-header button:hover { background: var(--i18n-devtool-control-hover); color: var(--i18n-devtool-foreground); } .i18n-devtool__output-header button:active { background: var(--i18n-devtool-control-pressed); } .i18n-devtool__output-header button:focus-visible { box-shadow: 0 0 0 2px var(--i18n-devtool-primary); } .i18n-devtool__output-header svg { width: 0.875rem; height: 0.875rem; } .i18n-devtool__output pre { max-height: 10rem; overflow: auto; margin: 0; padding: 0.65rem 1rem; border-top: 1px solid var(--i18n-devtool-border); font: 0.72rem/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; white-space: pre-wrap; } .i18n-devtool__main { flex: 1; min-height: 0; overflow: hidden; } .i18n-devtool__empty { display: grid; min-height: 100%; place-items: center; padding: 2rem; color: var(--i18n-devtool-muted); text-align: center; } .i18n-devtool .i18n-message-panel { --i18n-border: var(--i18n-devtool-border); --i18n-muted: var(--i18n-devtool-muted); --i18n-surface: var(--i18n-devtool-panel); height: 100%; } .i18n-devtool .i18n-message-workspace { height: 0; min-height: 0; overflow: hidden; } .i18n-devtool .i18n-message-panel__toolbar { background: color-mix( in srgb, var(--i18n-devtool-background) 90%, transparent ); } .i18n-devtool .i18n-message-panel input[type="search"], .i18n-devtool .i18n-message-panel textarea, .i18n-devtool .i18n-message-panel button:not(.i18n-message-copy__trigger) { background: var(--i18n-devtool-panel); } .i18n-devtool .i18n-message-panel button.i18n-message-copy__trigger, .i18n-devtool .i18n-message-panel button.i18n-message-copy__trigger:hover:not(:disabled), .i18n-devtool .i18n-message-panel button.i18n-message-copy__trigger[aria-expanded="true"] { background: transparent; } .i18n-devtool .i18n-message-panel .i18n-message-copy__menu > button:hover:not(:disabled), .i18n-devtool .i18n-message-panel .i18n-message-copy__menu > button:focus-visible { background: var(--i18n-devtool-control-hover); } .i18n-devtool .i18n-message-copy__feedback { background: var(--i18n-devtool-panel); } .i18n-devtool .i18n-message-panel .i18n-message-navigation button { background: transparent; } @supports (appearance: base-select) { .i18n-devtool__select, .i18n-devtool__select::picker(select) { appearance: base-select; } .i18n-devtool__select { align-items: center; gap: 0.5rem; } .i18n-devtool__select::picker-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; background: currentColor; content: ""; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: rotate 140ms ease; } .i18n-devtool__select:open::picker-icon { rotate: 180deg; } .i18n-devtool__select::picker(select) { margin-block-start: 0.25rem; padding: 0.25rem; border: 1px solid var(--i18n-devtool-border); border-radius: 0.625rem; background: var(--i18n-devtool-panel); box-shadow: 0 12px 32px rgb(0 0 0 / 20%); color: var(--i18n-devtool-foreground); } .i18n-devtool__select option { min-height: 2.25rem; align-items: center; gap: 0.5rem; padding: 0.4rem 0.625rem; border: 0; border-radius: 0.4rem; background: transparent; color: inherit; } .i18n-devtool__select option:hover, .i18n-devtool__select option:focus { background: var(--i18n-devtool-control-hover); } .i18n-devtool__select option:checked { background: color-mix( in srgb, var(--i18n-devtool-primary) 12%, var(--i18n-devtool-panel) ); color: var(--i18n-devtool-primary); } .i18n-devtool__select option::checkmark { width: 1rem; height: 1rem; background: currentColor; content: ""; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; } } @media (max-width: 42rem) { .i18n-devtool__panel { inset: 0; width: 100vw; border-radius: 0; transform: none; } .i18n-devtool__header { align-items: stretch; flex-direction: column; } .i18n-devtool__controls { flex-wrap: wrap; } .i18n-devtool__locale-field, .i18n-devtool__source-locale-field { min-width: 10rem; flex: 1; } .i18n-devtool__action-field { flex: none; } }