$transitionTime: 200ms;
$transitionAll: all $transitionTime;

$floatingButtonSize: 1.8em;
$floatingMenuDistance: 0.5em;

// loader
.loader {
    display: block;
    border: 0.3em solid $ui_darkAccent;
    border-top: 0.3em solid white; //rgba fallback
    border-top: 0.3em solid rgba(255, 255, 255, 0);
    border-radius: 50%;
    width: 2em;
    height: 2em;
    animation: spin 1.5s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/// Messages
.messages {
    position: absolute;
    left: 0.5em;
    bottom: 0.5em;

    .message {
        padding: 0.5em;

        margin-bottom: 0.5em;
        &:last-of-type {
            margin-bottom: 0;
        }

        color: $ui_darkCasual;
        background: $ui_lightCasual;

        .close {
            &:before {
                display: inline-block;
                margin-left: 0.5em;

                font-family: $fa-font-family;
                content: $fa-var-close;
                color: $ui_darkCasual;

                cursor: hand;
                cursor: pointer;

                transition: opacity 200ms;
            }

            &:hover:before {
                opacity: 0.5;
            }
        }

        &:before {
            display: none;

            margin-right: 0.5em;
            font-family: $fa-font-family;
        }

        &.loading {

            &:before {
                // include the spinning animation
                @extend .#{$fa-css-prefix}-spin;

                display: inline-block;
                content: $fa-var-circle-o-notch;

                color: $ui_darkAccent;
            }
        }

        &.error {
            font-weight: bold;

            &:before {
                display: inline-block;
                content: $fa-var-exclamation-circle;

                color: $red; // using $red instead of $ui_darkAccent, so when we change the accent color this will remain red
            }
        }

        &.warning {
            &:before {
                display: inline-block;
                content: $fa-var-exclamation-triangle;

                color: #f9bf1a; // warning yellow
            }
        }
    }
}

/// FLOATING MENU
#floatingMenu {
    z-index:900;
    position: absolute;
    right: 0;
    bottom: 0;
    display:block;

    .button {
        display:inline-block;
        background: $ui_lightCasual;

        width: $floatingButtonSize;
        height: $floatingButtonSize;
        padding: 0.2em;

        margin: 0 $floatingMenuDistance $floatingMenuDistance 0;
        transition: $transitionAll;

        cursor: pointer;
        cursor: hand;

        color: $ui_darkCasual;

        img {
            width: 100%;
            height: 100%;
        }

        &:hover {
            background: $ui_lightAccent;
        }

        &:active {
            background: $ui_darkAccent;
        }
    }
}

.tooltip {
    display: none;
    position: absolute;
    z-index: 1000;
    bottom: 2 * $floatingMenuDistance + $floatingButtonSize;
    right: $floatingMenuDistance;
    background: $ui_lightCasual;
    padding: 1em;
}

.uibutton {
    transition: $transitionAll;

    font-weight: bold;
    display:inline-block;

    margin:0.5em 0.5em 0 0;
    padding: 0.4em;

    text-decoration: none;
    color: $ui_darkCasual;
    background: $ui_lightCasual;

    img {
        height: 1.2em;
        width: auto;
        vertical-align: bottom;
    }

    &:hover {
        background: $ui_lightAccent;
    }

    &:active {
        background: $ui_darkAccent;
    }
}

// popup windows

.importExport {
    padding: 1em;

    background:white;
    color: $ui_darkCasual;

    &.export textarea, &.import textarea {
        background: white;
        color: $ui_darkCasual;
        border: thin solid #aeaeae;

        font-family: 'Overpass Mono', monospace;
        font-size: 0.9em;

        overflow-x: hidden;
        overflow-y: auto;

        width: 40em;
        max-width: 90vw;

        resize: none;
        display: block;

        height: 20em;
        max-height: 50vh;
    }

    a.download, a.upload {
        @extend .uibutton;
    }

    &.library {
        ul {
            margin: 0;
            padding: 0;

            li {
                margin: 0;
                padding: 0;
                list-style: none;

                a {
                    @extend .uibutton;

                    margin: 0.2em;
                }
            }
        }
    }
}

/// CONTEXT MENU
$contextMenuPaddingLeftRight: 8px;
$contextMenuPaddingTopBottom: 0.2em;
$menuItemHeight: 1.7em;
$menuItemWidth: 10em;

ul#contextMenu, ul.subList {
    z-index: 1000;
    position: absolute;

    background: $ui_lightCasual;

    display: none;

    margin: 0;
    padding: $contextMenuPaddingTopBottom 0;

    color: $ui_darkCasual;

    li {
        list-style-type: none;

        margin: 0;
        padding: $contextMenuPaddingTopBottom $contextMenuPaddingLeftRight 0.1em $contextMenuPaddingLeftRight;

        cursor: pointer;
        cursor: hand;

        display:block;

        height: $menuItemHeight;

        transition: $transitionAll;

        &:hover {
            background: $ui_lightAccent;
        }

        &:active {
            background: $ui_darkAccent;
        }
    }
}
