/*
 * SMUSIM_SS_DISCORD_LIGHT_BUTTON_V1
 *
 * Based on requested Uiverse light-button style.
 */

.sm-discord-launcher {
    position: fixed;

    top: 22px;
    left: 26px;

    width: 100px;
    height: 100px;

    z-index: 4900;

    pointer-events: auto;
}


/*
 * Uiverse light button structure.
 */
.sm-discord-launcher.light-button .bt {
    position: relative;

    width: 100px;
    height: 100px;

    display: flex;

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

    padding: 0;

    outline: none;

    background: none;

    border: none;

    cursor: pointer;

    text-decoration: none;

    isolation: isolate;
}


.sm-discord-launcher.light-button .button-holder {
    position: relative;

    z-index: 3;

    display: flex;

    flex-direction: column;

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

    width: 100px;
    height: 100px;

    box-sizing: border-box;

    background-color: #0a0a0a;

    border-radius: 10px;

    color: #d1d5db;

    font-weight: 700;

    transition:
        300ms;

    outline:
        #202020 2px solid;

    outline-offset:
        2px;

    box-shadow:
        0 10px 35px
        rgba(0, 0, 0, .38);
}


/* SMUSIM_SS_DISCORD_ICON_QUARTER_V2 */
.sm-discord-launcher.light-button .button-holder svg {
    width: 12.5px;
    height: 12.5px;

    fill: #d1d5db;

    transition:
        300ms;

    pointer-events: none;
}


.sm-discord-launcher.light-button .light-holder {
    position: absolute;

    top: 0;
    left: 0;

    width: 100px;
    height: 200px;

    display: flex;

    flex-direction: column;

    align-items: center;

    pointer-events: none;

    z-index: 1;
}


.sm-discord-launcher.light-button
.light-holder
.dot {
    position: absolute;

    top: -5px;

    width: 10px;
    height: 10px;

    background-color:
        #0a0a0a;

    border-radius:
        10px;

    z-index: 2;

    transition:
        300ms;
}


.sm-discord-launcher.light-button
.light-holder
.light {
    position: absolute;

    top: 0;

    width: 200px;
    height: 200px;

    clip-path:
        polygon(
            50% 0%,
            25% 100%,
            75% 100%
        );

    background:
        transparent;

    opacity:
        0;

    transition:
        opacity 300ms,
        background 300ms;
}


.sm-discord-launcher.light-button
.bt:hover
.button-holder svg,
.sm-discord-launcher.light-button
.bt:focus-visible
.button-holder svg {
    fill:
        rgba(
            88,
            101,
            242,
            1
        );
}


.sm-discord-launcher.light-button
.bt:hover
.button-holder,
.sm-discord-launcher.light-button
.bt:focus-visible
.button-holder {
    color:
        rgba(
            88,
            101,
            242,
            1
        );

    outline:
        rgba(
            88,
            101,
            242,
            1
        )
        2px solid;

    outline-offset:
        2px;

    box-shadow:
        0 0 18px
        rgba(
            88,
            101,
            242,
            .42
        );
}


.sm-discord-launcher.light-button
.bt:hover
.light-holder
.light,
.sm-discord-launcher.light-button
.bt:focus-visible
.light-holder
.light {
    opacity: 1;

    background:
        linear-gradient(
            180deg,
            rgba(
                88,
                101,
                242,
                .85
            )
            0%,

            rgba(
                88,
                101,
                242,
                .18
            )
            45%,

            rgba(
                255,
                255,
                255,
                0
            )
            100%
        );
}


.sm-discord-launcher.light-button
.bt:hover
.light-holder
.dot,
.sm-discord-launcher.light-button
.bt:focus-visible
.light-holder
.dot {
    background-color:
        rgba(
            88,
            101,
            242,
            1
        );

    box-shadow:
        0 0 12px
        rgba(
            88,
            101,
            242,
            .9
        );
}


.sm-discord-launcher.light-button
.bt:active
.button-holder {
    transform:
        scale(.96);
}


@media (max-width: 640px) {

    .sm-discord-launcher {
        top: 18px;
        left: 18px;

        width: 78px;
        height: 78px;
    }


    .sm-discord-launcher.light-button .bt {
        width: 78px;
        height: 78px;
    }


    .sm-discord-launcher.light-button
    .button-holder {
        width: 78px;
        height: 78px;
    }


    .sm-discord-launcher.light-button
    .button-holder svg {
        width: 9.75px;
        height: 9.75px;
    }


    .sm-discord-launcher.light-button
    .light-holder {
        width: 78px;
        height: 170px;
    }


    .sm-discord-launcher.light-button
    .light-holder
    .light {
        width: 160px;
        height: 170px;
    }
}


/* ==========================================================
 * SMUSIM_SS_DISCORD_COMPACT_FRAME_V3
 *
 * Frame:
 *   100x100 -> 33.333x33.333
 *
 * Icon:
 *   12.5x12.5 -> 25x25
 * ========================================================== */

.sm-discord-launcher {
    width: 33.333px;
    height: 33.333px;
}


.sm-discord-launcher.light-button .bt {
    width: 33.333px;
    height: 33.333px;
}


.sm-discord-launcher.light-button .button-holder {
    width: 33.333px;
    height: 33.333px;

    border-radius: 3.333px;

    outline-offset: 1px;
}


.sm-discord-launcher.light-button .button-holder svg {
    width: 25px;
    height: 25px;
}


.sm-discord-launcher.light-button .light-holder {
    width: 33.333px;
    height: 66.667px;
}


.sm-discord-launcher.light-button
.light-holder
.dot {
    width: 3.333px;
    height: 3.333px;

    border-radius: 3.333px;
}


.sm-discord-launcher.light-button
.light-holder
.light {
    width: 66.667px;
    height: 66.667px;
}


@media (max-width: 640px) {

    .sm-discord-launcher {
        width: 26px;
        height: 26px;
    }


    .sm-discord-launcher.light-button .bt {
        width: 26px;
        height: 26px;
    }


    .sm-discord-launcher.light-button
    .button-holder {
        width: 26px;
        height: 26px;

        border-radius: 3px;
    }


    .sm-discord-launcher.light-button
    .button-holder svg {
        width: 19.5px;
        height: 19.5px;
    }


    .sm-discord-launcher.light-button
    .light-holder {
        width: 26px;
        height: 56.667px;
    }


    .sm-discord-launcher.light-button
    .light-holder
    .light {
        width: 53.333px;
        height: 56.667px;
    }
}


/* ==========================================================
 * SMUSIM_SS_DISCORD_FORCE_SIZE_V4
 *
 * New physical stylesheet.
 * Force exact visible size to avoid stale cache/cascade.
 * ========================================================== */

.sm-discord-launcher {
    width: 33.333px !important;
    height: 33.333px !important;

    min-width: 33.333px !important;
    min-height: 33.333px !important;

    max-width: 33.333px !important;
    max-height: 33.333px !important;
}


.sm-discord-launcher.light-button .bt {
    width: 33.333px !important;
    height: 33.333px !important;

    min-width: 33.333px !important;
    min-height: 33.333px !important;

    max-width: 33.333px !important;
    max-height: 33.333px !important;

    padding: 0 !important;
}


.sm-discord-launcher.light-button .button-holder {
    width: 33.333px !important;
    height: 33.333px !important;

    min-width: 33.333px !important;
    min-height: 33.333px !important;

    max-width: 33.333px !important;
    max-height: 33.333px !important;

    padding: 0 !important;

    border-radius: 4px !important;

    box-sizing: border-box !important;
}


.sm-discord-launcher.light-button
.button-holder svg {
    width: 25px !important;
    height: 25px !important;

    min-width: 25px !important;
    min-height: 25px !important;

    max-width: 25px !important;
    max-height: 25px !important;

    flex: 0 0 25px !important;
}


.sm-discord-launcher.light-button
.light-holder {
    width: 33.333px !important;
    height: 66.667px !important;
}


.sm-discord-launcher.light-button
.light-holder
.dot {
    width: 3.333px !important;
    height: 3.333px !important;
}


.sm-discord-launcher.light-button
.light-holder
.light {
    width: 66.667px !important;
    height: 66.667px !important;
}


/*
 * Keep the requested same size on mobile too.
 * This removes another possible source of visual override.
 */
@media (max-width: 640px) {

    .sm-discord-launcher {
        width: 33.333px !important;
        height: 33.333px !important;

        min-width: 33.333px !important;
        min-height: 33.333px !important;

        max-width: 33.333px !important;
        max-height: 33.333px !important;
    }


    .sm-discord-launcher.light-button .bt {
        width: 33.333px !important;
        height: 33.333px !important;

        min-width: 33.333px !important;
        min-height: 33.333px !important;

        max-width: 33.333px !important;
        max-height: 33.333px !important;
    }


    .sm-discord-launcher.light-button
    .button-holder {
        width: 33.333px !important;
        height: 33.333px !important;

        min-width: 33.333px !important;
        min-height: 33.333px !important;

        max-width: 33.333px !important;
        max-height: 33.333px !important;
    }


    .sm-discord-launcher.light-button
    .button-holder svg {
        width: 25px !important;
        height: 25px !important;

        min-width: 25px !important;
        min-height: 25px !important;

        max-width: 25px !important;
        max-height: 25px !important;
    }
}