/* LTE mobile edge wheel 1.0.0 */
@media (max-width: 767.98px) {
    .lte-edge-wheel {
        --lte-edge-wheel-opacity: .76;
        --lte-edge-wheel-accent: #3498db;
        position: fixed;
        z-index: 1042;
        top: 50%;
        right: 0;
        width: 190px;
        height: min(330px, calc(100vh - 140px));
        height: min(330px, calc(100dvh - 140px));
        transform: translateY(-50%);
        pointer-events: none;
        font-family: inherit;
        -webkit-tap-highlight-color: transparent;
    }

    .lte-edge-wheel__handle {
        position: absolute;
        z-index: 4;
        top: 50%;
        right: -8px;
        width: 42px;
        height: 82px;
        padding: 0 7px 0 0;
        transform: translateY(-50%);
        border: 1px solid rgba(255, 255, 255, .34);
        border-right: 0;
        border-radius: 46px 0 0 46px;
        color: #fff;
        background: rgba(30, 45, 70, var(--lte-edge-wheel-opacity));
        box-shadow: -5px 6px 18px rgba(20, 31, 48, .2);
        backdrop-filter: blur(9px) saturate(135%);
        -webkit-backdrop-filter: blur(9px) saturate(135%);
        pointer-events: auto;
        touch-action: manipulation;
        cursor: pointer;
    }

    .lte-edge-wheel__handle::before,
    .lte-edge-wheel__handle::after {
        content: '';
        position: absolute;
        left: 10px;
        width: 12px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        opacity: .88;
    }

    .lte-edge-wheel__handle::before {
        top: 34px;
        transform: rotate(-34deg);
    }

    .lte-edge-wheel__handle::after {
        top: 43px;
        transform: rotate(34deg);
    }

    .lte-edge-wheel__panel {
        position: absolute;
        inset: 0 -1px 0 0;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .28);
        border-right: 0;
        border-radius: 170px 0 0 170px;
        background:
            radial-gradient(circle at 112% 50%, rgba(255, 255, 255, .14) 0 23%, transparent 24%),
            rgba(30, 45, 70, var(--lte-edge-wheel-opacity));
        box-shadow: -10px 10px 30px rgba(20, 31, 48, .22);
        opacity: 0;
        transform: translateX(106%);
        transition: opacity .18s ease, transform .24s cubic-bezier(.2, .8, .2, 1);
        backdrop-filter: blur(12px) saturate(140%);
        -webkit-backdrop-filter: blur(12px) saturate(140%);
        pointer-events: none;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
    }

    .lte-edge-wheel--open {
        pointer-events: auto;
    }

    .lte-edge-wheel--open .lte-edge-wheel__panel {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
    }

    .lte-edge-wheel--open .lte-edge-wheel__handle {
        opacity: 0;
        pointer-events: none;
    }

    .lte-edge-wheel__item {
        position: absolute;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 42px;
        max-width: 142px;
        min-height: 42px;
        padding: 6px 9px;
        border: 1px solid transparent;
        border-radius: 22px;
        color: rgba(255, 255, 255, .78);
        text-decoration: none !important;
        transform: translate(-50%, -50%);
        transform-origin: center;
        transition: color .12s ease, background-color .12s ease, border-color .12s ease, opacity .12s ease;
        will-change: left, top, opacity, transform;
        outline: 0;
    }

    .lte-edge-wheel__item-icon {
        display: inline-flex;
        flex: 0 0 28px;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
    }

    .lte-edge-wheel__item-icon svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
    }

    .lte-edge-wheel__item-label {
        display: none;
        overflow: hidden;
        max-width: 92px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.15;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .lte-edge-wheel__item--selected {
        color: #fff;
        border-color: rgba(255, 255, 255, .46);
        background: rgba(52, 152, 219, .9);
        box-shadow: 0 5px 14px rgba(0, 0, 0, .18);
    }

    .lte-edge-wheel__item--selected .lte-edge-wheel__item-label {
        display: block;
    }

    .lte-edge-wheel__hint {
        position: absolute;
        z-index: 3;
        right: 16px;
        bottom: 20px;
        margin: 0;
        color: rgba(255, 255, 255, .68);
        font-size: 10px;
        line-height: 1.2;
        pointer-events: none;
    }

    .lte-edge-wheel--dragging .lte-edge-wheel__item {
        transition: none;
    }

    .lte-edge-wheel--settled .lte-edge-wheel__item--selected {
        animation: lte-edge-wheel-ready .52s ease both;
    }

    .dark-mode .lte-edge-wheel__handle,
    .dark-mode .lte-edge-wheel__panel {
        background-color: rgba(12, 18, 29, var(--lte-edge-wheel-opacity));
    }

    @keyframes lte-edge-wheel-ready {
        0%, 100% { box-shadow: 0 5px 14px rgba(0, 0, 0, .18); }
        50% { box-shadow: 0 0 0 5px rgba(52, 152, 219, .22), 0 6px 18px rgba(0, 0, 0, .24); }
    }

    @media (prefers-reduced-motion: reduce) {
        .lte-edge-wheel__panel,
        .lte-edge-wheel__item {
            transition: none;
        }

        .lte-edge-wheel--settled .lte-edge-wheel__item--selected {
            animation: none;
        }
    }
}

@media (min-width: 768px) {
    .lte-edge-wheel {
        display: none !important;
    }
}