:where(.c-base-dropdown) {
    position: relative;
    min-width: min(100%,250px)
}

.c-base-dropdown__button {
    width: 100%;
    display: flex;
    align-items: center
}

.c-base-dropdown__dropdown-list--top {
    top: calc(100% + var(--theme-spacing-5xs))
}

.c-base-dropdown--color--surface .c-base-dropdown__button {
    --un-bg-opacity: 1;
    background-color: rgb(var(--theme-colors-background-surface) / var(--un-bg-opacity));
    --bgCurrent: rgb(var(--theme-colors-background-surface) / var(--un-bg-opacity));
    --theme-colors-strong-on-X: var(--theme-colors-onSurfaceStrong);
    --theme-colors-medium-on-X: var(--theme-colors-onSurfaceMedium);
    --theme-colors-subtle-on-X: var(--theme-colors-onSurfaceSubtle);
    --theme-colors-disabled-on-X: var(--theme-colors-onSurfaceDisabled);
    --theme-colors-danger-on-X: var(--theme-colors-onSurfaceDanger);
    --theme-colors-interactive-on-X: var(--theme-colors-onSurfaceInteractive);
    --theme-colors-interactiveHover-on-X: var(--theme-colors-onSurfaceInteractiveHover);
    --theme-colors-interactiveActive-on-X: var(--theme-colors-onSurfaceInteractiveActive);
    --theme-colors-onIndent-on-X: var(--theme-colors-onSurfaceOnIndent);
    --theme-colors-onIndentHover-on-X: var(--theme-colors-onSurfaceOnIndentHover);
    --theme-colors-onIndentActive-on-X: var(--theme-colors-onSurfaceOnIndentActive);
    --theme-colors-indent-on-X: var(--theme-colors-onSurfaceIndent);
    --theme-colors-indentActive-on-X: var(--theme-colors-onSurfaceIndentActive);
    --theme-colors-text-strong-on-X: var(--theme-colors-text-onSurfaceStrong);
    --theme-colors-text-medium-on-X: var(--theme-colors-text-onSurfaceMedium);
    --theme-colors-text-subtle-on-X: var(--theme-colors-text-onSurfaceSubtle);
    --theme-colors-text-disabled-on-X: var(--theme-colors-text-onSurfaceDisabled);
    --theme-colors-text-danger-on-X: var(--theme-colors-text-onSurfaceDanger);
    --theme-colors-text-interactive-on-X: var(--theme-colors-text-onSurfaceInteractive);
    --theme-colors-text-interactiveHover-on-X: var(--theme-colors-text-onSurfaceInteractiveHover);
    --theme-colors-text-interactiveActive-on-X: var(--theme-colors-text-onSurfaceInteractiveActive);
    --theme-colors-text-onIndent-on-X: var(--theme-colors-text-onSurfaceOnIndent);
    --theme-colors-text-onIndentHover-on-X: var(--theme-colors-text-onSurfaceOnIndentHover);
    --theme-colors-text-onIndentActive-on-X: var(--theme-colors-text-onSurfaceOnIndentActive);
    --theme-colors-border-extraStrong-on-X: var(--theme-colors-border-onSurfaceExtraStrong);
    --theme-colors-border-strong-on-X: var(--theme-colors-border-onSurfaceStrong);
    --theme-colors-border-medium-on-X: var(--theme-colors-border-onSurfaceMedium);
    --theme-colors-border-subtle-on-X: var(--theme-colors-border-onSurfaceSubtle);
    --theme-colors-border-danger-on-X: var(--theme-colors-border-onSurfaceDanger);
    --theme-colors-border-interactive-on-X: var(--theme-colors-border-onSurfaceInteractive)
}

    .c-base-dropdown--color--surface .c-base-dropdown__button:hover {
        --un-bg-opacity: 1;
        background-color: rgb(var(--theme-colors-background-surfaceHover) / var(--un-bg-opacity));
        --bgCurrent: rgb(var(--theme-colors-background-surfaceHover) / var(--un-bg-opacity))
    }

    .c-base-dropdown--color--surface .c-base-dropdown__button:active, .c-base-dropdown--color--surface .c-base-dropdown__button[aria-expanded=true] {
        --un-bg-opacity: 1;
        background-color: rgb(var(--theme-colors-background-surfaceActive) / var(--un-bg-opacity));
        --bgCurrent: rgb(var(--theme-colors-background-surfaceActive) / var(--un-bg-opacity))
    }

.c-base-dropdown--color--surfaceVariant .c-base-dropdown__button {
    --un-bg-opacity: 1;
    background-color: rgb(var(--theme-colors-background-surfaceVariant) / var(--un-bg-opacity));
    --bgCurrent: rgb(var(--theme-colors-background-surfaceVariant) / var(--un-bg-opacity));
    --theme-colors-strong-on-X: var(--theme-colors-onSurfaceVariantStrong);
    --theme-colors-medium-on-X: var(--theme-colors-onSurfaceVariantMedium);
    --theme-colors-subtle-on-X: var(--theme-colors-onSurfaceVariantSubtle);
    --theme-colors-disabled-on-X: var(--theme-colors-onSurfaceVariantDisabled);
    --theme-colors-danger-on-X: var(--theme-colors-onSurfaceVariantDanger);
    --theme-colors-interactive-on-X: var(--theme-colors-onSurfaceVariantInteractive);
    --theme-colors-interactiveHover-on-X: var(--theme-colors-onSurfaceVariantInteractiveHover);
    --theme-colors-interactiveActive-on-X: var(--theme-colors-onSurfaceVariantInteractiveActive);
    --theme-colors-onIndent-on-X: var(--theme-colors-onSurfaceVariantOnIndent);
    --theme-colors-onIndentActive-on-X: var(--theme-colors-onSurfaceVariantOnIndentActive);
    --theme-colors-onIndentHover-on-X: var(--theme-colors-onSurfaceVariantOnIndentHover);
    --theme-colors-indent-on-X: var(--theme-colors-onSurfaceVariantIndent);
    --theme-colors-indentActive-on-X: var(--theme-colors-onSurfaceVariantIndentActive);
    --theme-colors-text-strong-on-X: var(--theme-colors-text-onSurfaceVariantStrong);
    --theme-colors-text-medium-on-X: var(--theme-colors-text-onSurfaceVariantMedium);
    --theme-colors-text-subtle-on-X: var(--theme-colors-text-onSurfaceVariantSubtle);
    --theme-colors-text-disabled-on-X: var(--theme-colors-text-onSurfaceVariantDisabled);
    --theme-colors-text-danger-on-X: var(--theme-colors-text-onSurfaceVariantDanger);
    --theme-colors-text-interactive-on-X: var(--theme-colors-text-onSurfaceVariantInteractive);
    --theme-colors-text-interactiveHover-on-X: var(--theme-colors-text-onSurfaceVariantInteractiveHover);
    --theme-colors-text-interactiveActive-on-X: var(--theme-colors-text-onSurfaceVariantInteractiveActive);
    --theme-colors-text-onIndent-on-X: var(--theme-colors-text-onSurfaceVariantOnIndent);
    --theme-colors-text-onIndentActive-on-X: var(--theme-colors-text-onSurfaceVariantOnIndentActive);
    --theme-colors-text-onIndentHover-on-X: var(--theme-colors-text-onSurfaceVariantOnIndentHover);
    --theme-colors-border-extraStrong-on-X: var(--theme-colors-border-onSurfaceVariantExtraStrong);
    --theme-colors-border-strong-on-X: var(--theme-colors-border-onSurfaceVariantStrong);
    --theme-colors-border-medium-on-X: var(--theme-colors-border-onSurfaceVariantMedium);
    --theme-colors-border-subtle-on-X: var(--theme-colors-border-onSurfaceVariantSubtle);
    --theme-colors-border-danger-on-X: var(--theme-colors-border-onSurfaceVariantDanger);
    --theme-colors-border-interactive-on-X: var(--theme-colors-border-onSurfaceVariantInteractive)
}

    .c-base-dropdown--color--surfaceVariant .c-base-dropdown__button:hover {
        --un-bg-opacity: 1;
        background-color: rgb(var(--theme-colors-background-surfaceVariantHover) / var(--un-bg-opacity));
        --bgCurrent: rgb(var(--theme-colors-background-surfaceVariantHover) / var(--un-bg-opacity))
    }

    .c-base-dropdown--color--surfaceVariant .c-base-dropdown__button:active, .c-base-dropdown--color--surfaceVariant .c-base-dropdown__button[aria-expanded=true] {
        --un-bg-opacity: 1;
        background-color: rgb(var(--theme-colors-background-surfaceVariantActive) / var(--un-bg-opacity));
        --bgCurrent: rgb(var(--theme-colors-background-surfaceVariantActive) / var(--un-bg-opacity))
    }

:where(.c-input-dropdown) {
    position: relative;
    min-width: min(100%,250px)
}