$action-menu-shadow: 2px 2px 0 var(--color--action-menu-shadow);

.action-menu {
    display: inline-block;
    position: relative;
    text-align: right;
    vertical-align: middle;

    &:not(.is-open) .action-menu-content {
        display: none;
    }
}

.action-menu-wrapper {
    position: absolute;

    &:not(.is-open) {
        display: none;
    }
}

.action-menu,
.action-menu-wrapper {
    z-index: 2;

    .action-menu-content {
        position: absolute;
        top: -10px;
        right: -10px;

        padding: 10px 10px 10px 5px;

        background: var(--white);
        border: thin solid var(--color--action-menu-border);
        border-radius: var(--border-radius-default);
        box-shadow: $action-menu-shadow;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
    }

    .action-menu-icon {
        z-index: 1;

        background: transparent;
        border: 0;
        position: relative;
        cursor: pointer;
        display: block;
        padding: 0;
        width: var(--icon-size-action-menu);
        height: var(--icon-size-action-menu);

        // Create animated icon that changes to close icon on activation/hover
        span {
            width: calc(var(--icon-size-action-menu) / 4);
            height: calc(var(--icon-size-action-menu) / 4);
            transform: translate(calc(-1 * (var(--icon-size-action-menu) / 8)), 0);
            transition: all .25s ease-in-out;

            display: block;
            position: absolute;
            background-color: var(--color--highlight);
            border-radius: 50%;
            opacity: 1;
            left: 50%;

            &:nth-child(1) {
                top: 0px;
            }

            &:nth-child(2) {
                top: calc(var(--icon-size-action-menu) / 2);
                transform: translate(calc(-1 * (var(--icon-size-action-menu) / 8)), calc(-1 * (var(--icon-size-action-menu) / 8)));
            }

            &:nth-child(3) {
                bottom: 0;
            }
        }
    }

    .action-menu-title {
        font-weight: bold;
        margin: 0 0 0 10px;
    }

    .action-menu-list {
        list-style: none;
        margin: 0;
        padding: 20px 0 0 0;
    }

    .action-menu-item {
        line-height: 24px;
        padding: 0 0 0 5px;
        border-left: solid 4px transparent;

        > a,
        > button,
        > label {
            margin: 0;
            padding: 2px 30px 2px 0;
            display: block;
        }

        .action-menu-item-icon {
            vertical-align: middle;
            margin-right: 0.5em;
            width: var(--icon-size-action-menu);
            height: var(--icon-size-action-menu);
        }

        > button {
            background-color: unset;
            border: 0;
            text-align: left;
            width: 100%;
        }

        > label,
        > button,
        > a {
            color: var(--color--highlight);
            cursor: pointer;
            &:hover {
                color: var(--color--highlight-hover);
                text-decoration: none;
            }
        }

        > hr {
            border-style: none;
            border-top: thin solid var(--color--action-menu-divider);
            margin: 7px 0 7px -5px;
        }

        &.action-menu-item-disabled {
            > label,
            > button {
                color: var(--color--font-inactive);
                cursor: default;

                &:hover {
                    color: var(--color--font-inactive);
                }
            }
        }

        &:hover {
            background-color: var(--color--action-menu-hover);
            border-color: var(--color--action-menu-marker-hover);
            a, a:hover {
                color: var(--color--font-primary);
            }
        }
    }

    &.is-open {
        z-index: 3;
        .action-menu-icon {
            span {
                border-radius: 0;

                &:nth-child(1) {
                    left: 0;
                    transform: rotate(45deg) translate(calc((var(--icon-size-action-menu) / 4) + 0.5px), calc((var(--icon-size-action-menu) / 4) + 0.5px));
                    width: 100%;
                }

                &:nth-child(2) {
                    opacity: 0;
                }

                &:nth-child(3) {
                    left: 0;
                    transform: rotate(-45deg) translate(calc(var(--icon-size-action-menu) / 4), calc(-1 * (var(--icon-size-action-menu) / 4)));
                    width: 100%;
                }
            }
        }
    }

    &.is-reversed {
        .action-menu-content {
            top: auto;
            bottom: -4px;

            .action-menu-list .action-menu-item:last-of-type {
                padding-right: 20px;
            }
        }
    }
}


/* copied from copyable-links.less and modified */
.js-action-confirm-animation {
    $animation-name: js-action-confirm-confirmation;
    $animation-duration: 2s;

    // Position confirmation message above the link
    position: relative;

    div {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        text-align: center;

        @include icon(before, check-circle, status-green, $padding: 5px);
    }

    // Flip the link and confirmation message along the x axis
    a,
    div {
        backface-visibility: hidden;
        pointer-events: none;
    }

    a {
        @keyframes #{$animation-name}-front {
            0% {
                opacity: 1;
                transform: rotateX(0);
            }
            33% {
                opacity: 0;
                transform: rotateX(180deg);
            }
            66% {
                opacity: 0;
                transform: rotateX(180deg);
            }
            100% {
                opacity: 1;
                transform: rotateX(0);
            }
        }
        animation: #{$animation-name}-front $animation-duration linear;
    }

    div {
        @keyframes #{$animation-name}-back {
            0% {
                opacity: 0;
                transform: rotateX(180deg);
            }
            33% {
                opacity: 1;
                transform: rotateX(0);
            }
            66% {
                opacity: 1;
                transform: rotateX(0);
            }
            100% {
                opacity: 0;
                transform: rotateX(180deg);
            }
        }
        animation: #{$animation-name}-back $animation-duration linear;
    }
}