@keyframes powerline-slide-in {
    0% {
        margin-bottom: calc(-1 * var(--footer-padding-bottom-for-powerline) + 8px);
    }
    100% {
        margin-bottom: 0;
    }
}

@keyframes powerline-slide-out {
    0% {
        margin-bottom: 0;
    }
    100% {
        margin-bottom: calc(-1 * var(--footer-padding-bottom-for-powerline) + 8px);
    }
}

.powerline {
    --clr-white: #fff;
    --arrow-width: 310px;
    --arrow-width-sm: 245px;
    --arrow-height: 28px;
    --arrow-angle: 38deg;
    --arrow-cathetus-length: 12px;
    --arrow-left-pos: .375rem;
    --arrow-border: 1px solid var(--clr-white);
    --arrow-border-skewed: 2px solid var(--clr-white);
    --top-half-arrow-skew: skew(var(--arrow-angle));
    --bottom-half-arrow-skew: skew(calc(-1*var(--arrow-angle)));
    --eplan-logo-offset-top: 53px;
    --eplan-logo-offset-bottom: 22px;
    --flat-head-of-first-half-arrow-width: calc(var(--arrow-cathetus-length) + 2px);

    .powerline-fixed-container {

        &.slide-in {
            animation: 1s powerline-slide-in forwards ease;
        }

        &.slide-out {
            animation: 1s powerline-slide-out forwards ease;
        }
    }

    .powerline-arrow-first {
        height: var(--arrow-height);
        position: relative;

        /* flat tail */
        div:first-child {
            height: inherit;
            position: absolute;
            right: calc(100% - var(--arrow-cathetus-length));
            border-top: var(--arrow-border);
            border-bottom: var(--arrow-border);
        }

        /* backgound filling line */
        & > div[role='presentation']:last-child {
            height: 2px;
            width: calc(100% - 3px);
            position: absolute;
            top: calc(50% - 1px);
            left: var(--arrow-cathetus-length);
            border-radius: 1px;
            z-index: -1;
        }
    }

    .powerline-arrow-first::before {
        content: '';
        position: absolute;
        top: 0;
        left: var(--arrow-left-pos);
        height: calc(var(--arrow-height) / 2);
        width: inherit;
        transform: var(--top-half-arrow-skew);
        z-index: -1;
        border-right: var(--arrow-border-skewed);
        border-top: var(--arrow-border);
        box-sizing: border-box;
    }

    .powerline-arrow-first::after {
        content: '';
        position: absolute;
        top: 50%;
        left: var(--arrow-left-pos);
        height: calc(var(--arrow-height) / 2);
        width: inherit;
        transform: var(--bottom-half-arrow-skew);
        z-index: -1;
        border-right: var(--arrow-border-skewed);
        border-bottom: var(--arrow-border);
        box-sizing: border-box;
    }

    .powerline-arrow {
        height: var(--arrow-height);
        position: relative;

        /* backgound filling line */
        & > div[role='presentation']:first-child {
            height: 2px;
            width: calc(100% - 5px);
            position: absolute;
            top: calc(50% - 1px);
            left: calc(var(--arrow-cathetus-length) + 2px);
            border-radius: 1px;
            z-index: -1;
        }
    }

    .powerline-arrow::before {
        content: '';
        position: absolute;
        top: 0;
        left: var(--arrow-left-pos);
        height: calc(var(--arrow-height) / 2);
        width: 100%;
        transform: var(--top-half-arrow-skew);
        z-index: -1;
        border-right: var(--arrow-border-skewed);
        border-left: var(--arrow-border-skewed);
        border-top: var(--arrow-border);
        box-sizing: border-box;
    }

    .powerline-arrow::after {
        content: '';
        position: absolute;
        top: 50%;
        left: var(--arrow-left-pos);
        height: calc(var(--arrow-height) / 2);
        width: 100%;
        transform: var(--bottom-half-arrow-skew);
        z-index: -1;
        border-right: var(--arrow-border-skewed);
        border-left: var(--arrow-border-skewed);
        border-bottom: var(--arrow-border);
        box-sizing: border-box;
    }

    .powerline-arrow-last-tail {
        height: var(--arrow-height);

        & > div:first-child {
            position: relative;
            height: inherit;
        }

        & > div:first-child::before {
            content: '';
            position: absolute;
            top: 0;
            left: var(--arrow-left-pos);
            height: calc(var(--arrow-height) / 2);
            width: 100%;
            transform: var(--top-half-arrow-skew);
            z-index: -1;
            border-right: var(--arrow-border-skewed);
            border-left: var(--arrow-border-skewed);
            border-top: var(--arrow-border);
            box-sizing: border-box;
        }

        & > div:first-child::after {
            content: '';
            position: absolute;
            top: 50%;
            left: var(--arrow-left-pos);
            height: calc(var(--arrow-height) / 2);
            width: 100%;
            transform: var(--bottom-half-arrow-skew);
            z-index: -1;
            border-right: var(--arrow-border-skewed);
            border-left: var(--arrow-border-skewed);
            border-bottom: var(--arrow-border);
            box-sizing: border-box;
        }

        /* flat head of first half-arrow */
        & > div:first-child > div:first-child {
            position: absolute;
            top: 0;
            right: calc(-1 * (var(--arrow-cathetus-length) + 1px));
            height: inherit;
            width: var(--flat-head-of-first-half-arrow-width);
            border-top: var(--arrow-border);
            border-bottom: var(--arrow-border);
            border-right: var(--arrow-border);
        }

        /* backgound filling line */
        & > div:first-child > div[role='presentation']:last-child {
            height: 2px;
            width: calc(100% - 3px);
            position: absolute;
            top: calc(50% - 1px);
            left: calc(var(--arrow-cathetus-length) + 2px);
            border-radius: 1px;
            z-index: -1;
        }

        /* eplan logo container */
        & > div:nth-child(2) {
            margin-left: calc(var(--flat-head-of-first-half-arrow-width) + 4px);
            position: relative;
            top: calc(-1 * var(--eplan-logo-offset-top));
            margin-bottom: calc(-1 * var(--eplan-logo-offset-top) - var(--eplan-logo-offset-bottom));
        }
    }

    .powerline-arrow-last-head {
        height: var(--arrow-height);

        & > div:first-child {
            position: relative;
            height: inherit;
        }

        & > div:first-child::before {
            content: '';
            position: absolute;
            top: 0;
            left: var(--arrow-left-pos);
            height: calc(var(--arrow-height) / 2);
            width: 100%;
            z-index: -1;
            border-right: var(--arrow-border-skewed);
            border-left: var(--arrow-border-skewed);
            border-top: var(--arrow-border);
            box-sizing: border-box;
        }

        & > div:first-child::after {
            content: '';
            position: absolute;
            top: 50%;
            left: var(--arrow-left-pos);
            height: calc(var(--arrow-height) / 2);
            width: 100%;
            z-index: -1;
            border-right: var(--arrow-border-skewed);
            border-left: var(--arrow-border-skewed);
            border-bottom: var(--arrow-border);
            box-sizing: border-box;
        }

        /* flat tail of last arrow */
        & > div:first-child > div:first-child {
            position: absolute;
            top: 0;
            left: 0;
            height: inherit;
            border-top: var(--arrow-border);
            border-bottom: var(--arrow-border);
            border-left: var(--arrow-border);
        }

        /* backgound filling line */
        & > div:first-child > div[role='presentation']:last-child {
            height: 2px;
            width: calc(100% - 3px);
            position: absolute;
            top: calc(50% - 1px);
            left: var(--arrow-cathetus-length);
            border-radius: 1px;
            z-index: -1;
        }
    }
}

/* improve pixel aliasing on 125% scaled screens */
@media (max-resolution: 1.25dppx) {
    .powerline {
        --arrow-border: var(--arrow-border-skewed);
    }
}