@mixin loading-indicator() {
    align-items: center;
    display: flex;

    &::after,
    &::before {
        content: '';
        height: var(--eui-s-l);
        position: absolute;
        right: var(--eui-s-s);
        width: var(--eui-s-l);
    }

    &::before {
        border: var(--eui-s-3xs) solid rgba(0, 0, 0, 0.35);
        border-radius: 100%;
    }

    &::after {
        animation: loading 0.6s linear;
        animation-iteration-count: infinite;
        border-color: var(--eui-c-white) transparent transparent;
        border-radius: 100%;
        border-style: solid;
        border-width: var(--eui-s-3xs);
        box-shadow: 0 0 0 1px transparent;
    }

    &--sm::after,
    &--sm::before {
        height: var(--eui-s-m);
        width: var(--eui-s-m);
    }

    @keyframes loading {
        to { transform: rotate(360deg); }
    }
}
