﻿.actions-menu {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    text-align: center;
    background-color: inherit;
}

    .actions-menu .header-label {
        line-height: 1.3em;
    }

    .actions-menu .action-button {
        cursor: pointer;
    }

    .actions-menu > .action-button {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        background-color: inherit;
        color: inherit;
    }

        .actions-menu > .action-button .icon-container .icon {
            -webkit-mask-image: url('/Content/symbols/chevron_down.svg');
            mask-image: url('/Content/symbols/chevron_down.svg');
            background-color: black;
            margin-left: 5px;
        }

            .actions-menu:hover > .action-button .icon-container .icon {
                -webkit-mask-image: url('/Content/symbols/chevron_up.svg');
                mask-image: url('/Content/symbols/chevron_up.svg');
            }

    .actions-menu > .action-link-group {
        display: flex;
        justify-content: center;
        background-color: inherit;
        color: inherit;
        display: none;
    }

    .actions-menu:hover > .action-link-group {
        display: block;
    }

    .actions-menu > .action-link-group > .action-link-container {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 1px solid transparent;
        width: calc(100% - 2px);
        background-color: inherit;
        z-index: 2;
    }

        .actions-menu > .action-link-group > .action-link-container > .action-button {
            width: 100%;
            text-align: center;
            background-color: inherit;
            color: inherit;
            padding: 5px;
            font-weight: 500;
            box-sizing: border-box;
        }

    .actions-menu.am-basic {
        background-color: var(--background-color);
    }

        .actions-menu.am-basic .action-link-group .action-link-container {
            border: 1px solid var(--brand-gray);
            border-radius: var(--border-radius);
        }

            .actions-menu.am-basic .action-link-group .action-link-container .action-button.selected,
            .actions-menu.am-basic .action-link-group .action-link-container .action-button:hover {
                color: var(--background-color);
                background-color: var(--brand-info-blue);
            }