/*
 * Powered by NaxIT
 * Eigenständig, ohne Framework und ohne externe Fonts.
 * Farben und Größen können über die Variablen am Element überschrieben werden.
 */
@property --naxit-powered-edge-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.naxit-powered-by {
    --naxit-powered-color: #111111;
    --naxit-powered-muted: rgba(17, 17, 17, .5);
    --naxit-powered-border: rgba(17, 17, 17, .16);
    --naxit-powered-bg: rgba(255, 255, 255, .96);
    --naxit-powered-logo-fill: #111111;
    --naxit-powered-edge: rgba(17, 17, 17, .72);
    --naxit-powered-edge-soft: rgba(17, 17, 17, .18);
    --naxit-powered-radius: 999px;
    --naxit-powered-edge-angle: 0deg;

    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 6px 10px 6px 13px;
    border: 1px solid var(--naxit-powered-border);
    border-radius: var(--naxit-powered-radius);
    background: var(--naxit-powered-bg);
    color: var(--naxit-powered-color);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1;
    text-decoration: none;
    transition:
        border-color 240ms ease,
        background-color 240ms ease;
    -webkit-tap-highlight-color: transparent;
    isolation: isolate;
    position: relative;
}

.naxit-powered-by::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -1px;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--naxit-powered-edge-angle),
        transparent 0deg 252deg,
        var(--naxit-powered-edge-soft) 282deg,
        var(--naxit-powered-edge) 322deg,
        transparent 360deg
    );
    pointer-events: none;
    opacity: 0;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
}

.naxit-powered-by.is-visible::before {
    opacity: 1;
    animation: naxit-powered-edge-loop 2.8s linear infinite;
}

.naxit-powered-by > * {
    position: relative;
    z-index: 1;
}

.naxit-powered-by:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.naxit-powered-by__label {
    display: inline-block;
    color: var(--naxit-powered-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

.naxit-powered-by__logo {
    display: inline-flex;
    align-items: center;
    width: 96px;
    transform-origin: center bottom;
}

.naxit-powered-by__svg {
    display: block;
    width: 100%;
    height: auto;
    flex: 0 0 auto;
    overflow: visible;
    shape-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
}

.naxit-powered-by__svg path {
    fill: none;
    stroke: transparent;
    stroke-width: 18;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.naxit-powered-by__arrow {
    width: 14px;
    height: 14px;
    margin-left: 1px;
    color: var(--naxit-powered-muted);
    transition:
        color 220ms ease,
        transform 280ms cubic-bezier(.2, .8, .2, 1);
}

.naxit-powered-by__arrow path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@keyframes naxit-powered-edge-loop {
    to {
        --naxit-powered-edge-angle: 360deg;
    }
}

@media (prefers-reduced-motion: reduce) {
    .naxit-powered-by,
    .naxit-powered-by *,
    .naxit-powered-by *::before,
    .naxit-powered-by *::after {
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    .naxit-powered-by__svg path {
        opacity: 1;
        fill: var(--naxit-powered-logo-fill);
        stroke: none;
        stroke-dasharray: none;
        stroke-dashoffset: 0;
    }

    .naxit-powered-by::before {
        opacity: 0;
    }
}