.mpern-env-ribbon {
    z-index: 10000;

    font-family: monospace;
    font-size: 0.7rem;
    line-height: 1em;
    white-space: pre;

    overflow: hidden;
    position: absolute;
    left: -6.5em;
    top: 2em;
    width: 20em;
    transform: rotate(-45deg);

    opacity: .9;
    color: #e8e8e8;
    box-shadow: 0 0 1em 0.5em rgba(0, 0, 0, 0.75);

    pointer-events: none;
}

.mpern-env-ribbon::before {
    content: attr(data-environment);
    display: block;
    padding: 0.1em 0;
    font-weight: 800;
    text-align: center;
}


.mpern-env-ribbon-build {
    display: flex;
    position: relative;
    top: 0;
    right: 0;
    animation: slideh 12s infinite;
}

.mpern-env-ribbon-build:hover, .mpern-env-ribbon-buildinfo:hover {
    animation-play-state: paused;
}

.mpern-env-ribbon-buildinfo:before {
    content: attr(data-info);
    width: 224px;
    display: block;
    flex-shrink: 0;
    font-size: 0.5rem;
    text-align: center;
}

@keyframes slideh {
    0% {
        right: 0;
    }
    24% {
        right: 0;
    }
    25% {
        right: 100%;
    }
    49% {
        right: 100%;
    }
    50% {
        right: 200%;
    }
    74% {
        right: 200%;
    }
    75% {
        right: 300%;
    }
    99% {
        right: 300%;
    }
    100% {
        right: 0;
    }
}

.mpern-env-ribbon[data-type=local] { background-color: #71716F  }
.mpern-env-ribbon[data-type=development] { background-color: #a1b56c }
.mpern-env-ribbon[data-type=staging] { background-color: #dc9656 }
.mpern-env-ribbon[data-type=production] { background-color: #ab4642 }