/*
====================================================
RADIAL MENU - Responsive
====================================================
*/

.radial-menu{

    /* Colors */
    --color-surface:#ffffff;
    --color-text-dark:#374151;

    /* Sizes */
    --menu-size:60px;
    --item-size:50px;
    --radius:150px;

    /* Animation */
    --transition-speed:.4s;
    --transition-curve:cubic-bezier(.68,-.55,.27,1.55);

    position:fixed;

    right:max(16px,env(safe-area-inset-right));
    bottom:max(16px,env(safe-area-inset-bottom));

    width:var(--menu-size);
    height:var(--menu-size);

    z-index:9999;
}

/* Prevent horizontal scroll */
html,
body{
    overflow-x:hidden;
}

/* Hide checkbox */
#menu-toggle-checkbox{
    display:none;
}

/* ====================================================
   MAIN BUTTON
==================================================== */

.menu-toggle-label{

    position:absolute;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    background:var(--button);
    color:var(--text-white);

    border-radius:50%;
    cursor:pointer;

    box-shadow:0 4px 15px rgba(0,0,0,.2);

    transition:.3s;

    z-index:2;
}

.menu-toggle-label:hover{
    transform:scale(1.05);
}

/* ====================================================
   ICONS
==================================================== */

.icon-open,
.icon-close{

    position:absolute;

    width:24px;
    height:24px;

    transition:
        transform .3s,
        opacity .3s;
}

.icon-close{

    opacity:0;
    transform:rotate(-45deg);
}

#menu-toggle-checkbox:checked
+ .menu-toggle-label
.icon-open{

    opacity:0;
    transform:rotate(45deg);
}

#menu-toggle-checkbox:checked
+ .menu-toggle-label
.icon-close{

    opacity:1;
    transform:rotate(0deg);
}

/* ====================================================
   MENU
==================================================== */

.menu-items{

    list-style:none;
    margin:0;
    padding:0;
}

.menu-item{

    position:absolute;

    width:var(--item-size);
    height:var(--item-size);

    top:calc((var(--menu-size) - var(--item-size))/2);
    left:calc((var(--menu-size) - var(--item-size))/2);

    opacity:0;
    pointer-events:none;

    transform:translate(0,0) scale(.5);

    transition:
        transform var(--transition-speed) var(--transition-curve),
        opacity var(--transition-speed);
}

.menu-item a{

    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:var(--color-surface);
    color:var(--color-text-dark);

    border-radius:50%;
    text-decoration:none;

    box-shadow:0 2px 8px rgba(0,0,0,.15);

    transition:.25s;
}

.menu-item a:hover{

    background:var(--button);
    color:var(--text-white);

    transform:scale(1.08);
}

.menu-item i,
.menu-item svg{

    width:22px;
    height:22px;
    font-size:22px;
}

/* ====================================================
   OPEN
==================================================== */

#menu-toggle-checkbox:checked
~ .menu-items
.menu-item{

    opacity:1;
    pointer-events:auto;
}

/* 1 */

#menu-toggle-checkbox:checked
~ .menu-items
.menu-item:nth-child(1){

    transform:translateY(calc(-1 * var(--radius)));
}

/* 2 */

#menu-toggle-checkbox:checked
~ .menu-items
.menu-item:nth-child(2){

    transform:translate(
        calc(-0.383 * var(--radius)),
        calc(-0.924 * var(--radius))
    );
}

/* 3 */

#menu-toggle-checkbox:checked
~ .menu-items
.menu-item:nth-child(3){

    transform:translate(
        calc(-0.707 * var(--radius)),
        calc(-0.707 * var(--radius))
    );
}

/* 4 */

#menu-toggle-checkbox:checked
~ .menu-items
.menu-item:nth-child(4){

    transform:translate(
        calc(-0.924 * var(--radius)),
        calc(-0.383 * var(--radius))
    );
}

/* 5 */

#menu-toggle-checkbox:checked
~ .menu-items
.menu-item:nth-child(5){

    transform:translateX(calc(-1 * var(--radius)));
}

/* ====================================================
   TABLET
==================================================== */

@media (max-width:992px){

    .radial-menu{

        --menu-size:56px;
        --item-size:46px;
        --radius:120px;

        right:max(14px,env(safe-area-inset-right));
        bottom:max(14px,env(safe-area-inset-bottom));
    }

    .menu-item i,
    .menu-item svg{

        width:20px;
        height:20px;
        font-size:20px;
    }

}

/* ====================================================
   MOBILE
==================================================== */

@media (max-width:768px){

    .radial-menu{

        --menu-size:52px;
        --item-size:42px;
        --radius:90px;

        right:max(12px,env(safe-area-inset-right));
        bottom:max(12px,env(safe-area-inset-bottom));
    }

    .menu-item i,
    .menu-item svg{

        width:18px;
        height:18px;
        font-size:18px;
    }

}

/* ====================================================
   SMALL PHONES
==================================================== */

@media (max-width:420px){

    .radial-menu{

        --menu-size:48px;
        --item-size:38px;
        --radius:75px;

        right:max(10px,env(safe-area-inset-right));
        bottom:max(10px,env(safe-area-inset-bottom));
    }

    .menu-item i,
    .menu-item svg{

        width:16px;
        height:16px;
        font-size:16px;
    }

}

/* ====================================================
   EXTRA SMALL
==================================================== */

@media (max-width:360px){

    .radial-menu{

        --menu-size:44px;
        --item-size:34px;
        --radius:65px;

        right:8px;
        bottom:8px;
    }

    .menu-item i,
    .menu-item svg{

        width:15px;
        height:15px;
        font-size:15px;
    }

}