@import (once) "../../include/vars";

:root {
    --action-index: 0;
    --action-button-background: #ebebeb;
    --action-button-color: #191919;
}

.dark-side {
    --action-button-background: #2b2d30;
    --action-button-color: #f3fcff;
}

.action-button {
    --num-actions: 0;
    --action-shift: 60px;
    
    padding: 0;
    margin: 0;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: @z-index-absolute;

    button {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-weight: 400;
        white-space: nowrap;
        user-select: none;
        border: 1px solid transparent;
        border-radius: 50%;
        font-size: 1rem;
        transition: @transition-short;
        background-color: var(--action-button-background);
        color: var(--action-button-color);
        cursor: pointer;
        outline: none;
        z-index: 1;

        .icon {
            transition: @transition-short;
            font-size: 24px;
            width: 24px;
            height: 24px;
            line-height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            object-fit: cover;
        }
    }

    button.active {
        &.rotate {
            transform: rotate(45deg);
        }

        .icon {
            transform: scale(1.6);
        }
    }

    .actions {
        list-style: none inside none;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        z-index: 0;

        li {
            width: 40px;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            padding: 0;
            border-radius: 50%;
            overflow: hidden;
            background-color: var(--action-button-background);
            color: var(--action-button-color);
            position: absolute;
            transition: all .3s;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transform-origin: 0 0;
            z-index: 0;

            * > {
                width: 100%;
                max-height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                object-fit: cover;
                text-decoration: none;
                color: inherit;
                background: inherit;
            }
        }
    }

    button.active + .actions li {
        --angle: calc(360deg / var(--num-actions) * var(--action-index));
        transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--action-shift)) rotate(calc(-1 * var(--angle))) scale(1);
    }
}