.custom-dropdown {
    display: inline-block;
    padding: 1px 8px;
}

.custom-dropdown > :first-child:after {
    background-image: url("");
    border-color: var(--theme-accent-label-color) transparent transparent;
    border-style: solid;
    border-width: 4px;
    content: "";
    display: inline-block;
    height: 1px;
    margin-left: 4px;
    margin-top: 2px;
    position: relative;
    vertical-align: middle;
    width: 1px;
}

.custom-dropdown:hover {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: -1px;
}

.custom-dropdown ul {
    display: none;
    list-style: none outside none;
    margin: 0;
    min-width: 100%;
    position: absolute;
    top: auto;
    z-index: 100;
}

.custom-dropdown:hover ul,
.custom-dropdown.wikia-menu-button:hover ul {
    display: block;
}

.custom-dropdown li a {
    font-size: 12px;
    line-height: 14px;
}

.WikiaArticle {
    overflow: visible;
}

/**
* The following rules approximate legacy styles which are missing from UCP.
*
* Some notes, in no particular order, follow.
*
*  - Because of the template, we only need the base styles for `.wikia-menu-button`.
*    The `:hover` styles from <buttons-wikia-menu.scss> revert the `:hover` styles from <buttons-wikia.scss> to the base styles.
*    We don't need `button`-specific stuff (like `[disabled]`) or variants (like `.secondary` and `.big`).
*    Since the `div` has no `tabindex`, we don't need `:focus` either.
*
* For details, see:
*
*   - <https://discordapp.com/channels/246075715714416641/246737000189788161/761137290251862037>;
*   - <https://github.com/Wikia/app/blob/release-1153.001/skins/shared/styles/buttons/buttons-wikia-menu.scss>; and
*   - <https://github.com/Wikia/app/blob/release-1153.001/skins/shared/styles/buttons/buttons-wikia.scss>.
*
*/

.custom-dropdown.wikia-menu-button {
    /* non-overridden declarations from <buttons-wikia.scss> follow: */
    background-color: var(--theme-accent-color);
    /* TODO: maybe set `background-image` to `linear-gradient(to bottom, $color-button-highlight 35%, var(--theme-accent-color) 65%)` */
    border: 1px solid var(--theme-accent-color);
    border-radius: 4px;
    color: var(--theme-accent-label-color);
    cursor: pointer;
    display: inline-block;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    height: 19px;
    line-height: 20px;
    white-space: nowrap;

    /* non-overridden declarations from <buttons-wikia-menu.scss> follow: */
    list-style: none;
    margin: 0;
    position: relative;
    text-align: left;
}

.custom-dropdown.wikia-menu-button a {
    text-decoration: none;
}

.custom-dropdown.wikia-menu-button ul {
    background: var(--theme-page-background-color);
    border: 1px solid var(--theme-accent-color);
    box-shadow: 1px 2px 12px 0 #000; /* TODO: maybe calculate color as `darken(var(--theme-article-background-color), 80%)` */
    display: none;
    left: -1px;
    margin: 0;
    position: absolute;
    z-index: 100;
}

.custom-dropdown.wikia-menu-button ul a,
.custom-dropdown.wikia-menu-button ul .mw-selflink {
    color: var(--theme-page-text-color);
    display: block;
    padding: 9px 9px 7px;
}

.custom-dropdown.wikia-menu-button ul a:hover {
    background-color: var(
        --theme-page-background-color--secondary
    ); /* TODO: compute this properly; for light wikis, `$dropdown-background` is `mix(var(--theme-accent-color), var(--theme-article-background-color), 20%)`, and for dark wikis, it's `lighten($dropdown-background, 8%)` */

    /* extra UCP crap follows: */
    color: var(--theme-page-text-color);
}

/* Update menu colors according to the comment in the line 111. */

/**
*** color-mix() approach.
***
*** Note: this uses the color-mix() function which is only supported in modern browsers.
*** See: https://caniuse.com/?search=color-mix
**/
@supports (background-color: color-mix(in srgb, #000 20%, #fff)) {
    /** Light theme. **/
    .theme-fandomdesktop-light .custom-dropdown.wikia-menu-button ul a:is(:hover, :focus) {
        background-color: color-mix(in srgb, var(--theme-accent-color) 20%, var(--theme-page-background-color));
    }

    /** Dark theme. **/
    .theme-fandomdesktop-dark .custom-dropdown.wikia-menu-button ul a:is(:hover, :focus) {
        background-color: color-mix(in srgb, #fff 8%, var(--theme-page-background-color));
    }
}

/**
*** Relative color syntax approach.
***
*** This should also lighten the background color of menu items by 8% with the
*** difference that it uses the relative color syhtax to get more accurate colors.
***
*** Note: this uses relative color syntax which, as of november 2023, is only
*** supported in the latest version of Chrome, Edge, and Safari.
*** See: https://caniuse.com/css-relative-colors
**/
@supports (color: rgb(from #fff r g b)) {
    .theme-fandomdesktop-dark .custom-dropdown.wikia-menu-button ul a:is(:hover, :focus) {
        background-color: oklch(from var(--theme-page-background-color) calc(l + 0.08) c h);
    }
}

.custom-dropdown.wikia-menu-button ul li {
    border-top: 1px solid var(--theme-border-color);
    line-height: normal;

    /* extra UCP crap follows: */
    margin: 0;
}

.custom-dropdown.wikia-menu-button ul li:first-child {
    border: 0;
}

.custom-dropdown.wikia-menu-button .WikiaMenuElement {
    margin: 0;
}