/*
 * Styling for LocalizedField. Scoped to the "localized-field" class the
 * component sets on itself, so it does not affect other components. Loaded via
 * a @StyleSheet annotation on the component.
 *
 * The component is a bordered box with a language selector as a shaded header
 * above a straight divider, and a single text editor filling the rest of the
 * box. The selector is either a tab bar (few languages) or a combo box (many);
 * both are styled to read the same way. The editor has no chrome of its own, so
 * the only frame is the surrounding box (no "box in a box").
 *
 * Theme-agnostic: the accent and surface colors come from the Aura design
 * tokens when present and fall back to the corresponding Lumo tokens otherwise.
 */

.localized-field {
    --_lf-accent: var(--aura-accent-color, var(--lumo-primary-color));
    --_lf-accent-text: var(--aura-accent-text-color, var(--lumo-primary-text-color));
    /* Lumo styles input fields as a subtle background fill with no border. The
     * box uses that fill, while the selector header sits on the solid base color
     * so the tab/combo strip is not tinted by the fill — only the editor below
     * the divider carries it. The Aura overrides for these are below. */
    --_lf-surface: var(--lumo-contrast-10pct);
    --_lf-header: var(--lumo-base-color);
}

/* Aura paints input fields as a translucent "glass" surface over a border, NOT
 * as the tinted solid surface token (--aura-surface-color-solid is slightly
 * grey/blue and stays light in dark mode). To read identically to a plain Aura
 * text field, mirror the field's own background exactly: a near-white in light
 * mode and a dark translucent in dark mode. These two values are the field's
 * actual computed [part=input-field] background in each mode; Aura derives them
 * internally with no public token to reuse, so they are reproduced here, and
 * light-dark() switches between them off the inherited color-scheme just as the
 * field does. The header is transparent so the single translucent surface shows
 * uniformly through the tab strip — stacking two translucent layers there would
 * make the header lighter/darker than the editor.
 *
 * Gated on Aura's theme marker (--vaadin-aura-theme: 1, inherited from :root)
 * via a style container query, since Aura is applied through an imported bundle
 * with no theme attribute/class on the document to hook a selector onto. */
@container style(--vaadin-aura-theme: 1) {
    .localized-field {
        --_lf-surface: light-dark(oklab(1 0 0 / 0.7), oklab(0.32 -0.0021 -0.0118 / 0.7));
        --_lf-header: transparent;
    }
}

/* The custom field's input wrapper does not grow by default, so a height set on
 * the field would leave empty space below the box. Let it fill the field's
 * content area so the height reaches the editor. */
.localized-field::part(input-fields) {
    flex: 1;
}

/* The box looks like a text field of the active theme (see --_lf-surface). The
 * border is present only in Aura (its fields have one); in Lumo the fill alone
 * marks the field, so the border collapses to 0 there. The theme is detected
 * via the --vaadin-aura-theme marker (1 in Aura, unset elsewhere). */
.localized-field-box {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: solid var(--vaadin-border-color);
    border-width: calc(var(--vaadin-aura-theme, 0) * 1px);
    border-radius: var(--vaadin-radius-m);
    background: var(--_lf-surface);
    /* Clip the divider to the rounded corners. */
    overflow: hidden;
}

/* ---------- Tabs selector (few languages) ---------- */

/* A compact underline-style tab strip used as a slightly shaded header. The
 * Vaadin 25 tab style properties flatten the default chrome (no panel
 * background, radius, padding or per-tab borders), so no ::part overrides are
 * needed; the divider under the strip is an inset box-shadow. */
.localized-field-box > vaadin-tabs {
    flex: 0 0 auto;
    width: 100%;
    background: var(--_lf-header);
    --vaadin-tabs-background: transparent;
    --vaadin-tabs-border-radius: 0;
    --vaadin-tabs-padding: 0;
    --vaadin-tabs-gap: 0;
    --vaadin-tab-border-radius: 0;
    --vaadin-tab-border-width: 0;
    --vaadin-tab-padding: var(--vaadin-padding-s);
    box-shadow: inset 0 -1px 0 0 var(--vaadin-border-color);
}

/* Active tab: an underline in the accent color, drawn with an inset box-shadow
 * so it does not fight the theme's own selection bar or tab borders. */
.localized-field-box vaadin-tab[selected] {
    --vaadin-tab-background: transparent;
    --vaadin-tab-text-color: var(--_lf-accent-text);
    color: var(--_lf-accent-text);
    box-shadow: inset 0 -2px 0 0 var(--_lf-accent);
}

/* ---------- ComboBox selector (many languages) ---------- */

/* The combo box is the header instead of the tab bar; same shaded strip with a
 * divider under it, and no border of its own so the box frame is the only one. */
.localized-field-box > vaadin-combo-box {
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
    background: var(--_lf-header);
    border-bottom: 1px solid var(--vaadin-border-color);
    padding: 0;
}

.localized-field-box > vaadin-combo-box::part(input-field) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ---------- Content / editor ---------- */

/* The content area fills the rest of the box; the editor fills the content. */
.localized-field-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.localized-field-content vaadin-text-field,
.localized-field-content vaadin-text-area {
    width: 100%;
    height: 100%;
}

.localized-field-content vaadin-text-field::part(input-field),
.localized-field-content vaadin-text-area::part(input-field) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.localized-field-content vaadin-text-area::part(input-field) {
    height: 100%;
}

/* Focus is shown as an accent ring around the editor area only (the editor has
 * no border of its own), in the same accent color as the active tab underline.
 * The selector's divider turns accent and the ring covers the editor's other
 * three sides, so the two join into one closed frame with no gap between the
 * active-tab underline and the focus ring. */
.localized-field-box:has(.localized-field-content vaadin-text-field[focused],
        .localized-field-content vaadin-text-area[focused]) > vaadin-tabs {
    box-shadow: inset 0 -1px 0 0 var(--_lf-accent);
}

.localized-field-box:has(.localized-field-content vaadin-text-field[focused],
        .localized-field-content vaadin-text-area[focused]) > vaadin-combo-box {
    border-bottom-color: var(--_lf-accent);
}

.localized-field-content:has(vaadin-text-field[focused], vaadin-text-area[focused]) {
    box-shadow:
        inset 2px 0 0 var(--_lf-accent),
        inset -2px 0 0 var(--_lf-accent),
        inset 0 -2px 0 var(--_lf-accent);
}

/* ---------- Translate action ---------- */

/* The translate action is an ActionButton (a wrapper around the button), with
 * the class on the wrapper. It is overlaid in the bottom-right corner of the
 * box (position:absolute is set in Java, as the wrapper carries an inline
 * position): it rarely covers content there and takes no layout space. */
.localized-field-box .localized-field-translate {
    right: 2px;
    bottom: 2px;
    z-index: 1;
    margin: 0;
    /* The wrapper is inline-block; zero its line box so no baseline gap is added
     * below the button (which would make the icon's bottom margin larger than
     * its right margin). */
    line-height: 0;
}

/* Strip the theme chrome on the inner button so it reads as a bare icon in
 * every theme. Aura paints a border, a translucent background and a shadow on
 * the button host (Lumo's tertiary-inline icon button is already bare); flatten
 * all of it. The tall Lumo line-height is collapsed so the button shrink-wraps
 * the icon and the 2px inset is the same on the right and bottom edges. */
.localized-field-box .localized-field-translate vaadin-button {
    border: none;
    background: transparent;
    box-shadow: none;
    min-width: 0;
    min-height: 0;
    height: auto;
    line-height: 1;
    margin: 0;
    padding: 2px;
}