[data-dropdown-menu] {
    display: none;
}

[data-dropdown-button] [data-dropdown-caret] {
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
    /* Draw the triangle */
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/* #region " Icon button specific rules" */

[data-dropdown-button].btn.icon-button [data-dropdown-text] {
    display: inline-block;
    width: 12px;
}

[data-dropdown-button].btn.icon-button {
    width: 40px;
}

    [data-dropdown-button].btn.icon-button [data-dropdown-caret] {
        /* Center vertically */
        position: relative;
        height: 100%;
        top: calc(50% - 5px);
    }

/* #endregion */

[data-dropdown-menu] {
    border-radius: 0;
    border-style: none;
    background-color: var(--color-light-gray);
    min-width: initial;
}

[data-dropdown-menu-buttons-list] {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

    [data-dropdown-menu-buttons-list] li > a,
    [data-dropdown-menu-buttons-list] li > button {
        display: block;
        padding: 3px 20px;
        clear: both;
        font-weight: normal;
        line-height: 1.42857143;
        white-space: nowrap;
        font-family: var(--font-roboto-bold);
        font-size: 14px;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--color-button);
        border: 0;
        width: 100%;
        text-align: left;
    }

        [data-dropdown-menu-buttons-list] li > a:hover,
        [data-dropdown-menu-buttons-list] li > button:hover,
        [data-dropdown-menu-buttons-list] li > .in-progress {
            color: white;
            background-color: var(--color-button-focus);
        }

        [data-dropdown-menu-buttons-list] li > button[disabled] {
            background-color: var(--color-light-gray);
            color: var(--color-darkgray-50);
            cursor: default;
        }