/* =====================================================
   RALKERIE WAVEFORM
   DENSE + CLEAN
===================================================== */


/* =====================================================
   WRAPPER
===================================================== */

.waveform-wrapper {

    position: relative;

    width: 100%;

    flex-shrink: 0;

    z-index: 20;

}


/* =====================================================
   DISCORD CARD
===================================================== */

.waveform-wrapper > .discord-live-card {

    position: relative;

    z-index: 10;

}


/* =====================================================
   SIDES
===================================================== */

.wave-side {

    position: absolute;

    pointer-events: none;

    overflow: visible;

    z-index: 30;

}


/* =====================================================
   TOP
===================================================== */

.wave-side-top {

    left: 0;
    right: 0;

    top: 0;

    height: 2px;

}


/* =====================================================
   BOTTOM
===================================================== */

.wave-side-bottom {

    left: 0;
    right: 0;

    bottom: 0;

    height: 2px;

}


/* =====================================================
   LEFT
===================================================== */

.wave-side-left {

    left: 0;

    top: 0;
    bottom: 0;

    width: 2px;

}


/* =====================================================
   RIGHT
===================================================== */

.wave-side-right {

    right: 0;

    top: 0;
    bottom: 0;

    width: 2px;

}


/* =====================================================
   BARS
===================================================== */

.wave-bar {

    position: absolute;

    display: block;

    width: 3px;
    height: 2px;

    margin: 0;
    padding: 0;

    background: #ffffff;

    opacity: 0.95;

    pointer-events: none;

    border-radius: 1px;

    /*
     * Only transform is animated.
     */

    will-change: transform;

    /*
     * White center with pink glow.
     */

    box-shadow:
        0 0 2px #ffffff,
        0 0 5px #ff63ca,
        0 0 9px rgba(
            255,
            99,
            202,
            0.65
        );

}


/* =====================================================
   TOP
===================================================== */

.wave-side-top .wave-bar {

    bottom: 0;

    transform-origin:
        center bottom;

}


/* =====================================================
   BOTTOM
===================================================== */

.wave-side-bottom .wave-bar {

    top: 0;

    transform-origin:
        center top;

}


/* =====================================================
   LEFT
===================================================== */

.wave-side-left .wave-bar {

    right: 0;

    width: 2px;
    height: 3px;

    transform-origin:
        right center;

}


/* =====================================================
   RIGHT
===================================================== */

.wave-side-right .wave-bar {

    left: 0;

    width: 2px;
    height: 3px;

    transform-origin:
        left center;

}


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

@media (max-width: 700px) {

    .wave-bar {

        width: 2px;

    }


    .wave-side-left .wave-bar,
    .wave-side-right .wave-bar {

        width: 2px;

        height: 2px;

    }

}