@charset "utf-8";

/*For now just to prevent antipattern with global *{} setting in main.css*/
details.user-menu-panel *, details.user-menu-panel + .details-content * {
    margin: initial;
    padding: initial;
    box-sizing: initial;
}

details.user-menu-panel {
    display: flex;
    align-content: center;
    text-align: center;
    color: #1c1c1c;
    font-size: 20px;
    background: #9d9d9d;
    border-radius: 5px;
    cursor: pointer;
    margin-left: auto;

    & * {/*COPIED DEFAULTS to prevent antipattern issues caused by the same setup in @layer base in main.css*/
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    & summary {
        max-width: 140px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 6px 12px;
        list-style: none;/*Removes marker*/

        img {
            display: inline-block;
            vertical-align: bottom;
        }
    }
}

details.user-menu-panel + .details-content {
    will-change: transform, opacity, visibility;
    transition: transform .2s ease-out, opacity .2s ease-out, visibility .2s;
    transform: translateX(30%);
    opacity: 0;
    visibility: hidden;

    padding: 0 20px;
    position: absolute;
    overflow: hidden;
    contain: paint;
    right: 0;
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: end;

    & > div {
        contain: content;
        background: black;
        border-radius: 5px;
        border: 1px solid #ffffff56;
    }

    & .options {
        padding: 12px;
    }

    & .dynaspace {
        will-change: transform, opacity, visibility;
        transition: transform .15s ease-out, opacity .15s ease-out, visibility .15s;
        transform: translateX(30%);
        opacity: 0;
        visibility: hidden;

        display: flex;
        flex-direction: column;
        min-width: 120px;
        position: relative;

        & .spinnerSquare {
            margin: 0 auto;
            top: 9px;
        }

        & .spinnerSquare.play {
            width: 24px !important;
            height: 24px !important;
        }

        &.open {
            transform: translateX(0%);
            opacity: 1;
            visibility: visible;
        }

        & .refresh-purchase {
            visibility: hidden;
            cursor: pointer;
            width: calc(100% - 12px);
            margin: 6px auto;
            padding: 6px 0px;
            color: #ffffff;
            background: linear-gradient(0deg, #850000, #ff7e7e);
            border-radius: 10px;
            text-align: center;

            &.open {
                visibility: visible;
            }

            & .refresh-timer {
                color: #e1ff00;
            }
        }

        & .display {
            margin: auto;
            opacity: 0;
            transition: opacity .15s ease-out;
            text-align: center;

            &.open {
                opacity: 1;
            }

            & > div {
                margin: 0px auto;
                padding: 6px 8px;
                border-top: 1px solid rgb(103 103 103);
            }

            & > div:nth-of-type(even) {
                background-color: #313030;
            }

            & .confirming a, & .confirmed a, & .failed a {
                text-overflow: ellipsis;
                max-width: 250px;
                overflow: hidden;
                white-space: nowrap;
                display: inline-block;
                vertical-align: bottom;
                color:#00bdff;
                &:hover {
                    text-decoration: underline;
                }
            }

            & .confirming {
                

                & > span {
                    color: orange;
                }
            }

            & .confirmed > span {
                color: #00b500;
            }

            & .failed > span {
                color: red;
            }

        }
    }

    & .options {
        display: flex;
        flex-direction: column;
        row-gap: 8px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
        font-size: 1rem;

        button {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            font-size: 1rem;
            background-color: transparent;
            border: 0;
            color: white;
            cursor: pointer;

            &:hover {
                color: orange;
            }

            &.active {
                color: orange;
            }
        }
    }
}

details.user-menu-panel[open] + .details-content {
    transform: translateX(0%);
    opacity: 1;
    visibility: visible;
}

@media (max-width: 462px) {
    header nav ul.show {
        .details-content {
            left: 0;
            flex-direction: column-reverse;
        }
    }
}