/* menu radial */

.menu-radial {
    display: none;
    position: absolute;
    z-index: 2;
    top: calc(50% - var(--menu-radial-height, 0px));
    left: calc(50% - (var(--menu-radial-width, 0px)));
    width: var(--menu-radial-width, 100px);
    min-width: 200px;
    max-width: 300px;
    height: var(--menu-radial-height, 200px);
    min-height: 200px;
    max-height: 300px;
}

.mode--menu-radial .menu-radial {
    display: inline-block;
}

.menu-radial-content {
    display: inline-flex;
    position: absolute;
    width: 100%;
    height: 100%;
    min-width: 100px;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: flex-start;
}

.menu-radial-content > div:not([class~="menu-radial-background"]) {
    display: flex;
    position: absolute;
    z-index: 1;
    width: calc(50% + (var(--menu-radial-width-factor, 0.1) * 1em));
    height: calc(50% + (0.25 * 1em));
    justify-content: center;
    align-items: center;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg id='Layer_2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.53 19.08'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23ff037c;%7D%3C/style%3E%3C/defs%3E%3Cg id='Layer_2-2'%3E%3Cpath class='cls-1' d='M18.53,1.3C12.61-.68,5.98-.45,0,2.34L8.26,19.08c1.28-.44,2.63-.42,3.85,0L18.53,1.3Z'/%3E%3C/g%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg id='Layer_2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.53 19.08'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23ff037c;%7D%3C/style%3E%3C/defs%3E%3Cg id='Layer_2-2'%3E%3Cpath class='cls-1' d='M18.53,1.3C12.61-.68,5.98-.45,0,2.34L8.26,19.08c1.28-.44,2.63-.42,3.85,0L18.53,1.3Z'/%3E%3C/g%3E%3C/svg%3E");
    transform-origin: 55% 135%;
    -webkit-mask-position: 0%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-position: 0%;
    mask-repeat: no-repeat;
    mask-size: cover;
    opacity: 0;
    font-size: 1.25rem;
    background-color: #ff037c;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    cursor: pointer;
}

.mode--menu-radial .menu-radial-content > div:not([class~="menu-radial-background"]) {
    opacity: 1;
}

.menu-radial[class~="option--layout-four"] > .menu-radial-content > div:not([class~="menu-radial-background"]) {
    width: calc(88% + (var(--menu-radial-width-factor, 0.1) * 1em));
    height: calc(50% + (0.25 * 1em));
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg id='Layer_2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34.58 20.37'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23ff037c;%7D%3C/style%3E%3C/defs%3E%3Cg id='Layer_3'%3E%3Cpath class='cls-1' d='M18.38,18.62c1.44,0,2.77,.49,3.84,1.29l12.35-14.02C29.24,1.41,22.08-.84,14.66,.29,8.79,1.19,3.72,4.05,0,8.11l13.92,12.26c1.17-1.09,2.74-1.76,4.46-1.75Z'/%3E%3C/g%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg id='Layer_2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34.58 20.37'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23ff037c;%7D%3C/style%3E%3C/defs%3E%3Cg id='Layer_3'%3E%3Cpath class='cls-1' d='M18.38,18.62c1.44,0,2.77,.49,3.84,1.29l12.35-14.02C29.24,1.41,22.08-.84,14.66,.29,8.79,1.19,3.72,4.05,0,8.11l13.92,12.26c1.17-1.09,2.74-1.76,4.46-1.75Z'/%3E%3C/g%3E%3C/svg%3E");
    transform-origin: 53% 125%;
}

.menu-radial[class~="option--layout-three"] > .menu-radial-content > div:not([class~="menu-radial-background"]) {
    width: calc(64% + (var(--menu-radial-width-factor, 0.5) * 1em));
    height: calc(39%);
    transform-origin: 50% 132%;
}

.menu-radial-content > div:not([class~="menu-radial-background"]) > span,
.menu-radial-content > div:not([class~="menu-radial-background"]) > div,
.menu-radial-content > div:not([class~="menu-radial-background"]) > a,
.menu-radial-content > div:not([class~="menu-radial-background"]) > p {
    display: block;
    font-size: 1.5em;
    color: #fff;
}

.menu-radial-content > div:not([class~="menu-radial-background"]) {
    animation-name: menu-radial-rotate-keyframes;
    animation-direction: var(--menu-radial--animation-direction, var(--default-menu-radial-animation-direction, normal));
    animation-fill-mode: forwards;
    animation-duration: var(--menu-radial--animation-duration, var(--default-menu-radial-animation-duration, 1.25s));
    animation-iteration-count: 1;
    animation-delay: var(--menu-radial--animation-delay, var(--default-menu-radial-animation-delay, 0s));
    animation-timing-function: cubic-bezier(0.8,-0.27,0.025,1);
}

.menu-radial-content > div[class~="menu-radial-background"] {
    display: block;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg id='Layer_2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36.67 36.67'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23ff037c;opacity:.39;%7D%3C/style%3E%3C/defs%3E%3Cg id='Layer_2-2'%3E%3Cpath class='cls-1' d='M18.34,0C8.21,0,0,8.21,0,18.34s8.21,18.34,18.34,18.34,18.34-8.21,18.34-18.34S28.46,0,18.34,0Zm0,22.21c-2.14,0-3.87-1.73-3.87-3.87s1.73-3.87,3.87-3.87,3.87,1.73,3.87,3.87-1.73,3.87-3.87,3.87Z'/%3E%3C/g%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg id='Layer_2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36.67 36.67'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23ff037c;opacity:.39;%7D%3C/style%3E%3C/defs%3E%3Cg id='Layer_2-2'%3E%3Cpath class='cls-1' d='M18.34,0C8.21,0,0,8.21,0,18.34s8.21,18.34,18.34,18.34,18.34-8.21,18.34-18.34S28.46,0,18.34,0Zm0,22.21c-2.14,0-3.87-1.73-3.87-3.87s1.73-3.87,3.87-3.87,3.87,1.73,3.87,3.87-1.73,3.87-3.87,3.87Z'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-position: 0%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-position: 0%;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--shape-background-color, #ff037c);
}

.menu-radial-content > div:not([class~="menu-radial-background"]):nth-child(1) {
    --menu-radial-rotate: -22.5deg;
    background-color: var(--shape-background-color, #c4025f);
}

.menu-radial-content > div:not([class~="menu-radial-background"]):nth-child(2) {
    --menu-radial-rotate: 22.5deg;
}

.menu-radial-content > div:not([class~="menu-radial-background"]):nth-child(3) {
    --menu-radial-rotate: 66.5deg;
}

.menu-radial-content > div:not([class~="menu-radial-background"]):nth-child(4) {
    --menu-radial-rotate: 111deg;
}

.menu-radial-content > div:not([class~="menu-radial-background"]):nth-child(5) {
    --menu-radial-rotate: 156deg;
}

.menu-radial-content > div:not([class~="menu-radial-background"]):nth-child(6) {
    --menu-radial-rotate: 201deg;
}

.menu-radial-content > div:not([class~="menu-radial-background"]):nth-child(7) {
    --menu-radial-rotate: 246deg;
}

.menu-radial-content > div:not([class~="menu-radial-background"]):nth-child(8) {
    --menu-radial-rotate: 291deg;
}


/* quarters */
.menu-radial[class~="option--layout-four"] > .menu-radial-content > div:not([class~="menu-radial-background"]):nth-child(1) {
    --menu-radial-rotate: 0deg;
    background-color: var(--shape-background-color, #c4025f);
}

.menu-radial[class~="option--layout-four"] > .menu-radial-content > div:not([class~="menu-radial-background"]):nth-child(2) {
    --menu-radial-rotate: 90deg;
}

.menu-radial[class~="option--layout-four"] > .menu-radial-content > div:not([class~="menu-radial-background"]):nth-child(3) {
    --menu-radial-rotate: 180deg;
}

.menu-radial[class~="option--layout-four"] > .menu-radial-content > div:not([class~="menu-radial-background"]):nth-child(4) {
    --menu-radial-rotate: 270deg;
}


/* three button */
.menu-radial[class~="option--layout-three"] > .menu-radial-content > div:not([class~="menu-radial-background"]):nth-child(1) {
    width: calc(100% + (var(--menu-radial-width-factor, 0.1) * 1em));
    height: calc(50% + (0.0 * 1em));
    --menu-radial-rotate: 0deg;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg id='Layer_2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50.55 24.91'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23ff037c;%7D%3C/style%3E%3C/defs%3E%3Cg id='Layer_4'%3E%3Cpath class='cls-1' d='M25.37,17.99c3.98,0,7.25,3.03,7.63,6.92h17.55C50.35,11.12,39.11,0,25.28,0S.2,11.12,0,24.91H17.74c.38-3.88,3.65-6.92,7.63-6.92Z'/%3E%3C/g%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg id='Layer_2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50.55 24.91'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23ff037c;%7D%3C/style%3E%3C/defs%3E%3Cg id='Layer_4'%3E%3Cpath class='cls-1' d='M25.37,17.99c3.98,0,7.25,3.03,7.63,6.92h17.55C50.35,11.12,39.11,0,25.28,0S.2,11.12,0,24.91H17.74c.38-3.88,3.65-6.92,7.63-6.92Z'/%3E%3C/g%3E%3C/svg%3E");
}

.menu-radial[class~="option--layout-three"] > .menu-radial-content > div:not([class~="menu-radial-background"]):nth-child(2) {
    --menu-radial-rotate: 133deg;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg id='Layer_2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34.99 19.34'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23ff037c;%7D%3C/style%3E%3C/defs%3E%3Cg id='Layer_4'%3E%3Cpath class='cls-1' d='M11.92,19.34c2.96-2.75,7.52-2.7,10.43,0l12.65-11.74C25.53-2.08,10.08-2.59,0,6.5l11.92,12.84Z'/%3E%3C/g%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg id='Layer_2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34.99 19.34'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23ff037c;%7D%3C/style%3E%3C/defs%3E%3Cg id='Layer_4'%3E%3Cpath class='cls-1' d='M11.92,19.34c2.96-2.75,7.52-2.7,10.43,0l12.65-11.74C25.53-2.08,10.08-2.59,0,6.5l11.92,12.84Z'/%3E%3C/g%3E%3C/svg%3E");
}

.menu-radial[class~="option--layout-three"] > .menu-radial-content > div:not([class~="menu-radial-background"]):nth-child(3) {
    --menu-radial-rotate: 224deg;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg id='Layer_2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34.99 19.34'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23ff037c;%7D%3C/style%3E%3C/defs%3E%3Cg id='Layer_4'%3E%3Cpath class='cls-1' d='M11.92,19.34c2.96-2.75,7.52-2.7,10.43,0l12.65-11.74C25.53-2.08,10.08-2.59,0,6.5l11.92,12.84Z'/%3E%3C/g%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg id='Layer_2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34.99 19.34'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23ff037c;%7D%3C/style%3E%3C/defs%3E%3Cg id='Layer_4'%3E%3Cpath class='cls-1' d='M11.92,19.34c2.96-2.75,7.52-2.7,10.43,0l12.65-11.74C25.53-2.08,10.08-2.59,0,6.5l11.92,12.84Z'/%3E%3C/g%3E%3C/svg%3E");
}

.menu-radial-content > div:not([class~="menu-radial-background"]):hover {
    background-color: #ff77b9;
}

@keyframes menu-radial-rotate-keyframes {
    0% {
        -transform: rotate(0deg);
        opacity:0;
    }

    100% {
        transform: rotate(var(--menu-radial-rotate, 0deg));
        opacity:0.85;
    }
}