:host,
ak-locale-select.style-scope {
    --ak-c-locale-select--PaddingInline: 0.5em;
    --ak-c-locale-select--PaddingBlock: 0.25em;
    --ak-c-locale-select__select--PaddingInline: calc(
        var(--ak-c-locale-select--PaddingInline) * 4.5
    );
    cursor: pointer;
    display: flex;
    flex-flow: row;
    align-items: center;
    user-select: none;
    gap: var(--pf-global--spacer--sm);
    padding-inline: var(--pf-global--spacer--sm);
    padding-block: var(--pf-global--spacer--xs);
    overflow: hidden;
    outline: none;
}

[part="select"] {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    user-select: none;
    opacity: var(--ak-c-locale-select--Opacity, 1);
    will-change: opacity, text-decoration-color, background-color, color;
    isolation: isolate;

    /* Compatibility mode */
    background-color: var(--ak-c-locale-select--BackgroundColor, transparent) !important;
    color: var(--ak-c-locale-select--Color, inherit) !important;
    text-decoration: underline;
    text-decoration-color: var(--ak-c-locale-select--TextDecorationColor, transparent);

    border-radius: var(--pf-global--BorderRadius--sm);
    outline: 1px solid var(--ak-c-locale--select--OutlineColor, transparent);

    border: none;

    &:focus {
        outline: 1px solid var(--ak-c-locale--select--OutlineColor, transparent);

        outline-offset: initial;
    }

    &:open {
        /**
         * Edge is more restrictive with selects state styling.
         * Using the browser's preferred system colors here strikes
         * a good balance between visibility and design consistency.
         */
        --ak-c-locale-select--BackgroundColor: Field;
        --ak-c-locale-select--Color: FieldText;
    }

    padding-inline-start: var(
        --ak-c-locale-select__select--PaddingInlineStart,
        var(--ak-c-locale-select__select--PaddingInline)
    ) !important;
    padding-inline-end: var(
        --ak-c-locale-select__select--PaddingInlineEnd,
        var(--ak-c-locale-select__select--PaddingInline)
    ) !important;
    padding-block: var(--ak-c-locale-select--PaddingBlock) !important;

    appearance: none;

    &::picker-icon {
        /* Browser compatibility */
        color: transparent !important;
        display: none !important;
    }
}

[part="label"] {
    padding-inline-start: calc(var(--ak-c-locale-select--PaddingInline) * 1.25);
    background-color: var(--ak-c-locale-select--label--BackgroundColor, transparent);
    color: var(--ak-c-locale-select--label--Color, inherit);
    cursor: pointer;
    position: absolute;
    inset-block-start: 0.625em;
    inset-inline-start: 0.5em;

    z-index: 1;
    pointer-events: none;

    .icon {
        display: block;
        height: var(--pf-global--FontSize--xl);
        stroke-width: 0.5;
        stroke: currentColor;
        fill: currentColor;
    }
}

:host::after,
ak-locale-select.style-scope::after {
    padding-inline-end: var(--ak-c-locale-select--PaddingInline);
    inset-inline-end: var(--ak-c-locale-select--PaddingInline);

    content: "⋯";
    background-color: var(--ak-c-locale-select--label--BackgroundColor, transparent);
    color: var(--ak-c-locale-select--label--Color, inherit);
    cursor: pointer;
    position: absolute;
    opacity: var(--ak-c-locale-select__after--Opacity, 0);

    z-index: 1;
}

[part="select"] {
    transition-property: opacity;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}
