/* Language select of the contractor pages: LanguageSelect.razor in the public header and the server-rendered portal
   sign-in page (ContractorPortalAuthEndpoints) share this markup and sheet; ClientScripts/ui/languageSelect.ts opens it.
   The trigger takes the header's own text colour (currentColor), so it reads on the dark field header and on the
   light signup header in both themes. The list is a popup surface with the theme's surface and ink tokens. */

.language-select {
    position: relative;
    display: inline-flex;
}

.language-select[hidden] {
    display: none;
}

.language-select-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 4px 10px;
    border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, currentColor 8%, transparent);
    color: inherit;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.language-select-trigger:hover:not(:disabled),
.language-select-trigger[aria-expanded="true"] {
    border-color: color-mix(in srgb, currentColor 75%, transparent);
    background: color-mix(in srgb, currentColor 16%, transparent);
}

.language-select-trigger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.language-select-trigger:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.language-select-chevron {
    flex: none;
    transition: var(--sp-motion-transition-transform);
}

.language-select-trigger[aria-expanded="true"] .language-select-chevron {
    transform: rotate(180deg);
}

/* 20x15 keeps the 4:3 flag ratio; the hairline keeps the white stripes visible on light and dark surfaces. */
.language-select-flag {
    flex: none;
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent);
}

.language-select-list {
    position: absolute;
    z-index: 1060;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    min-width: max(100%, 11rem);
    margin: 0;
    padding: 4px;
    border: 1px solid var(--sp-color-border);
    border-radius: var(--sp-radius-md, 0.625rem);
    background: var(--sp-color-surface);
    box-shadow: var(--sp-shadow-md);
    color: var(--sp-color-ink-strong);
    list-style: none;
}

.language-select-list[hidden] {
    display: none;
}

/* languageSelect.ts opens the list upward when the trigger sits near the bottom of the window. */
.language-select-list[data-placement="top"] {
    top: auto;
    bottom: calc(100% + 6px);
}

.language-select-list:focus {
    outline: none;
}

.language-select-list:focus-visible {
    box-shadow: var(--sp-shadow-md), var(--sp-focus-ring);
}

.language-select-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 6px 10px;
    border-radius: 6px;
    color: inherit;
    font-size: 0.9375rem;
    text-decoration: none;
    cursor: pointer;
}

.language-select-option:hover,
.language-select-option.is-active {
    background: var(--sp-color-surface-info);
    color: var(--sp-color-ink-strong);
}

.language-select-option.is-active {
    outline: 2px solid var(--sp-color-brand);
    outline-offset: -2px;
}

.language-select-option[aria-selected="true"] {
    font-weight: 700;
}

/* The current language carries a check mark; aria-selected already tells assistive technology. */
.language-select-option[aria-selected="true"]::after {
    margin-inline-start: auto;
    padding-inline-start: 12px;
    color: var(--sp-color-brand-text);
    content: "\2713";
}

/* Phone headers give every control a 44px touch target, like the theme toggle and tutorial launcher beside it. */
@media (max-width: 700px), (pointer: coarse) {
    .language-select-trigger {
        min-height: var(--sp-control-height-touch);
    }
}

@media (pointer: coarse) {
    .language-select-option {
        min-height: 44px;
    }
}