:root {
    --ctx-radius: 50px;
    --ctx-icon-size: calc(var(--ctx-radius) * 0.6);
}

.vt-ctx-wrapper {
    position: absolute;
    z-index: 99999;
}

.vt-ctx-backdrop {
    visibility: hidden;
    z-index: 99997;
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    opacity: 0.15;
    pointer-events: none;
    user-select: none;
}

.vt-ctx-backdrop.visible {
    visibility: visible;
}

.vt-ctx-elevated {
    position: relative;
    z-index: 99998;
    filter: none !important;
}

.vt-ctx-item.vt-ctx-radial {
    position: absolute;
    top: calc(var(--ctx-radius) / -2);
    left: calc(var(--ctx-radius) / -2);
    display: flex;
    border-radius: calc(var(--ctx-radius) / 2);
    height: var(--ctx-radius);

    min-width: var(--ctx-radius);
    max-width: var(--ctx-radius);
    width: var(--ctx-radius);

    cursor: pointer;

    overflow: hidden;

    transition: width 0.1s ease, top 0.2s ease-out, left 0.2s ease-out;
    color: white;

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05);

    animation: fade-in 0.15s ease-in;
}

@keyframes fade-in {
    0% {
        visibility: hidden;
        opacity: 0;
    }

    1% {
        visibility: visible;
        opacity: 0;
    }

    100% {
        visibility: visible;
        opacity: 1;
    }
}

.vt-ctx-item.vt-ctx-radial.extendable.extended {
    min-width: var(--ctx-radius);
    max-width: none;
    z-index: 1;
}

.vt-ctx-item.vt-ctx-list {
    position: relative;
    display: flex;
    border-radius: calc(var(--ctx-radius) / 2);
    height: var(--ctx-radius);

    min-width: 0;
    max-width: 0;
    width: 0;

    cursor: pointer;

    overflow: hidden;

    transition: width 0.1s ease, top 0.2s ease, left 0.2s ease, filter 0.2s ease;
    color: white;

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05);
}

.vt-ctx-item.vt-ctx-list:hover {
    filter: brightness(110%);
}

.vt-ctx-item.vt-ctx-list:not(:first-child) {
    margin-top: 8px;
}

.vt-ctx-item.vt-ctx-list.extended {
    max-width: none;
    z-index: 1;
}

.vt-ctx-item-icon {
    min-width: var(--ctx-icon-size);
    max-width: var(--ctx-icon-size);
    min-height: var(--ctx-icon-size);
    max-height: var(--ctx-icon-size);
    margin: calc((var(--ctx-radius) - var(--ctx-icon-size)) / 2);
}

.vt-ctx-item-text {
    display: flex;
    white-space: nowrap;
    align-items: center;
    margin-left: 8px;
    padding-right: 16px;
}

.notransition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;

    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
}

.notransition * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;

    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
}