$popup-border-radius: 10px !default;
$primary: #e500ff !default;
$primary-fg: white !default;

.popup-panel {
    background-color: #2b303c;
    background-image: linear-gradient( #2b303c, #1d2028 );
    border-radius: $popup-border-radius;
    box-shadow: 5px 5px 30px rgba( black, 0.8 );
    flex-direction: column;
    color: #cfdbf2;
    transition: all 0.1s ease-out;
    position: absolute;
    z-index: 1000;
    min-height: 10px;
    min-width: 10px;
    font-family: Poppins;
    overflow: scroll;

    &.flat-top {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;

        .button:nth-child(1) {
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
        }
    }

    &.medium {
        max-width: 300px;
    }

    > .header {
        font-size: 12px;
        font-weight: 600;
        padding: 8px 12px;
        align-items: center;
        background-color: rgba( $primary, 0.4 );
        border-radius: $popup-border-radius $popup-border-radius 0 0;
        color: $primary-fg;
        flex-shrink: 0;

        .iconpanel {
            margin-right: 10px;
            font-size: 18px;
            color: $primary-fg;
        }
    }

    &.center-horizontal {
        transform-origin: top center;
    }

    &.below-center {
        transform: translateX( -50% );
        transform-origin: 50% 0%;
    }

    &.above-left {
        transform-origin: 0% 100%;
    }

    &:intro {
        transform: scale( 0 );
        pointer-events: none;
        opacity: 0;
    }

    &:outro {
        opacity: 0;
        transition: all 0.1s ease-in;
        margin-top: 50px;
        pointer-events: none;
    }

    &.below-stretch {
        transform-origin: 0% 0%;

        &:intro {
            transform: scaleY( 0.1 );
        }
    }

    &.success:outro {
        opacity: 0;
        transition: all 0.1s ease;
        margin-top: 0px;
        transform: scale( 0.7 );

        &.center-horizontal {
            transform: scale( 1.4 ) translateX( -50% );
            transform-origin: center;
        }
    }

    > .arrow-top {
        //background-color: #454e60;
        width: 20px;
        height: 20px;
        position: absolute;
        top: -10px;
        left: 50%;
        //transform: rotate( 45deg );
        z-index: -10;
    }

    > .canvas {
        flex-direction: column;
    }

    .information {
        padding: 16px;
        font-size: 12px;
        opacity: 0.5;
    }

    .button {
        background-color: transparent;
        border-radius: 0;
        font-size: 13px;
        padding: 8px 12px;
        padding-right: 24px;
        min-height: 10px;
        border: 0;
        flex-shrink: 0;

        &:nth-child( even ) {
            background-color: rgba( black, 0.3 );
        }

        color: #cfdbf2;
        font-weight: 400;
        white-space: nowrap;

        &:first-child {
            border-top-left-radius: $popup-border-radius;
            border-top-right-radius: $popup-border-radius;
        }

        &:last-child {
            border-bottom-left-radius: $popup-border-radius;
            border-bottom-right-radius: $popup-border-radius;
        }

        .iconpanel {
            color: $primary;
        }

        &:hover, &.active {
            color: $primary-fg;
            background-color: $primary;

            &:nth-child( even ) {
                background-color: rgba( $primary, 0.8 );
            }
            // Lol might be too much
            //	box-shadow: 0px 0px 100px rgba( $primary, 0.2 );
            //	text-shadow: 0px 0px 20px rgba( white, 0.2 );

            .iconpanel {
                color: $primary-fg;
            }
        }

        &:active {
            color: $primary-fg;
            background-color: rgba( #a1b7e1, 0.3 );

            .iconpanel {
                color: $primary-fg;
            }
        }

        &.disabled {
            pointer-events: none;
            opacity: 0.2;
        }
    }
}