.add-record-bar {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    // CKEditor panels use elevated stacking layers; keep this fixed utility
    // bar above all editor content and toolbars.
    z-index: 10000;
    justify-content: space-between;
    height: var(--add-record-bar-height);
    padding: 0 30px;
    background: $color-accent;
    background-color: darken($color-primary, 15%)
}

.record-search-form {
    display: flex;
    align-items: center;
    width: min(420px, 45vw);
    margin-right: 12px;
    align-self: center;
    label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    input {
        min-width: 0;
        width: 100%;
        height: 30px;
        padding: 0 38px 0 11px;
        border: 1px solid rgba($color-surface, .45);
        border-radius: 4px;
        outline: none;
        color: $color-text;
        background: $color-surface;
        font: inherit;

        &:focus {
            border-color: $color-surface;
            box-shadow: 0 0 0 2px rgba($color-surface, .25);
        }
    }

    button {
        width: 38px;
        height: 30px;
        margin-left: -38px;
        border: 0;
        color: $color-dropdown-control;
        background: transparent;
        cursor: pointer;
    }
}

.add-record-menu {
    position: relative;
}

.header-nav > .language-selector {
    display: flex;
    position: absolute;
    top: 50%;
    right: 5px;
    z-index: 3;
    align-items: center;
    height: 36px;
    transform: translateY(-50%);

    .language-flags {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 3px;
        border: 1px solid #ded5c8;
        border-radius: 9px;
        background: #f7f2ea;
    }

    .language-flag {
        display: grid;
        width: 34px;
        height: 30px;
        padding: 0;
        place-items: center;
        border: 1px solid transparent;
        border-radius: 6px;
        background: transparent;
        cursor: pointer;
        font-size: 19px;
        line-height: 1;

        &:hover,
        &:focus-visible {
            outline: none;
            background: #ebe2d5;
        }

        &.is-active {
            border-color: #d7aa55;
            background: #f3e5c9;
            box-shadow: inset 0 0 0 1px rgba(215, 170, 85, .18);
        }

        &:disabled {
            cursor: wait;
            opacity: .5;
        }
    }

    // Keep Google's select in the DOM as the translation engine, but expose
    // only the accessible flag controls.
    #google_translate_element {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

.add-record-button {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 42px;
    padding: 0 14px;
    border: 0;
    color: $color-text-on-dark;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;

    &:hover,
    &:focus-visible,
    &[aria-expanded="true"] {
        outline: none;
        background: $color-dropdown-control;
    }

    .fa-plus {
        display: grid;
        width: 22px;
        height: 22px;
        place-items: center;
        border: 2px solid $color-surface;
        border-radius: 50%;
        font-size: 12px;
    }
}

.add-record-chevron {
    font-size: 11px;
    transition: transform .2s ease;

    [aria-expanded="true"] & {
        transform: rotate(180deg);
    }
}

.add-record-dropdown {
    position: absolute;
    z-index: 120;
    top: calc(100% + 7px);
    right: 0;
    width: 220px;
    margin: 0;
    padding: 7px 0;
    list-style: none;
    border: 1px solid $color-dropdown-border;
    border-radius: 4px;
    background: $color-dropdown;
    box-shadow: 0 9px 24px $color-shadow-strong;

    &[hidden] { display: none; }
    li { margin: 0; }

    a,
    a:link,
    a:visited {
        display: block;
        padding: 10px 16px;
        color: $color-text-on-dark;
        text-decoration: none;
    }

    a:hover,
    a:focus-visible {
        outline: none;
        color: $color-text-on-dark;
        background: $color-dropdown-hover;
    }
}

@media (max-width: 1366px) {
    .add-record-bar {
        padding: 0 16px;
    }

    .add-record-dropdown {
        width: min(280px, calc(100vw - 32px));
    }
}

@media (max-width: 700px) {
    .add-record-bar {
        gap: 5px;
        padding: 0 8px;
    }

    .record-search-form {
        flex: 1;
        width: auto;
        margin-right: 4px;
    }

    .add-record-button {
        flex: 0 0 auto;
        padding: 0 9px;

        span,
        .add-record-chevron {
            display: none;
        }
    }

    .add-record-dropdown {
        position: fixed;
        top: calc(var(--add-record-bar-height) + 6px);
        right: 12px;
        left: 12px;
        width: auto;
    }
}