.Panel.Progress {
    --gap-base: 25px;
    --bar-height: 10px;

    padding-bottom: calc(var(--gap-base) + var(--bar-height) / 3);

    position: relative;

    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;

    width: min(100%, min-content, 300px);
    margin: 0 auto;

    overflow: hidden;


    > img {
        width: 40px;
        height: 40px;
    }

    > .status {
        white-space: nowrap;
    }

    > .bar {
        position: absolute;
        content: '';
        left: 0; right: 0; bottom: 0;
        height: 10px;
        background: hsl(var(--color-primary-hue), var(--color-primary-saturation), 85%);
        overflow: hidden;

        background-position: center left;
        background-size: 30px 30px;
        background-image: linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.1) 25%,
            rgba(0, 0, 0, 0.03) 25%,
            rgba(0, 0, 0, 0.03) 50%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0.1) 75%,
            rgba(0, 0, 0, 0.03) 75%,
            rgba(0, 0, 0, 0.03)
        ) !important;
        animation: progressBarIncreasingAnimation 0.5s linear infinite;

        > .innerBar {
            position: absolute;
            content: '';
            left: 0;
            bottom: 0;
            top: 0;
            background: var(--color-accent);
            width: 0%;

            transition: all 1s ease-in-out;
        }
    }

    &.failed {
        background: var(--color-error);
        color: #fff;

        > img,
        > .bar {
            display: none;
        }
    }
}

@keyframes progressBarIncreasingAnimation {
  from {
	background-position: 0 0;
  }
  to {
	background-position: 60px 30px;
  }
}