:host {
  --g-red-50: #e20015;
  --g-blue-50: #007bc0;
  --g-purple-50: #6f2da8;
  --g-green-50: #78be20;
}
.a-activity-indicator
{
    height:4.5rem;position:relative;width:4.5rem
}
.a-activity-indicator__top-box
{
    animation-delay:0s;
    animation-duration:3s;
    animation-fill-mode:none;
    animation-iteration-count:infinite;
    animation-name:top-box-animation-default;
    animation-timing-function:ease-in-out;
    background-color:var(--g-red-50);
    height:33.3333333333%;
    left:33.3333333333%;
    position:absolute;
    top:33.3333333333%;
    width:33.3333333333%;
    z-index:1
}
@keyframes top-box-animation-default
{0%,to{transform:translate(0)}12.5%{transform:translate(-24px)}24.99%{background-color:var(--g-red-50);
transform:translate(0)}25%{background-color:var(--g-blue-50)}37.5%{transform:translateY(-24px)}50%{transform:translate(0)}62.5%{transform:translate(-24px)}74.99%{background-color:var(--g-blue-50);
transform:translate(0)}75%{background-color:var(--g-red-50)}87.5%{transform:translateY(-24px)}}@keyframes top-box-animation-large{0%,to{transform:translate(0)}12.5%{transform:translate(-42.66px)}24.99%{background-color:var(--g-red-50);
transform:translate(0)}25%{background-color:var(--g-blue-50)}37.5%{transform:translateY(-42.66px)}50%{transform:translate(0)}62.5%{transform:translate(-42.66px)}74.99%{background-color:var(--g-blue-50);
transform:translate(0)}75%{background-color:var(--g-red-50)}87.5%{transform:translateY(-42.66px)}}.a-activity-indicator.-large .a-activity-indicator__top-box{animation-name:top-box-animation-large}@keyframes top-box-animation-small{0%,to{transform:translate(0)}12.5%{transform:translate(-16px)}24.99%{background-color:var(--g-red-50);
transform:translate(0)}25%{background-color:var(--g-blue-50)}37.5%{transform:translateY(-16px)}50%{transform:translate(0)}62.5%{transform:translate(-16px)}74.99%{background-color:var(--g-blue-50);transform:translate(0)}75%{background-color:var(--g-red-50)}87.5%{transform:translateY(-16px)}}.a-activity-indicator.-small .a-activity-indicator__top-box{animation-name:top-box-animation-small}.a-activity-indicator__bottom-box{animation-delay:0s;
animation-duration:3s;animation-fill-mode:none;animation-iteration-count:infinite;animation-name:bottom-box-animation-default;animation-timing-function:ease-in-out;
background-color:var(--g-purple-50);height:33.3333333333%;left:33.3333333333%;position:absolute;top:33.3333333333%;width:33.3333333333%;z-index:0}@keyframes bottom-box-animation-default{0%,to{background-color:var(--g-purple-50);
transform:translate(0)}12.5%{transform:translate(24px);z-index:2}25%{transform:translate(0);z-index:2}37.5%{transform:translateY(24px);z-index:0}49.99%{background-color:var(--g-purple-50);
transform:translate(0);z-index:0}50%{background-color:var(--g-green-50)}62.5%{transform:translate(24px);z-index:2}75%{transform:translate(0);z-index:2}87.5%{transform:translateY(24px);z-index:0}99.99%{background-color:var(--g-green-50)}}@keyframes bottom-box-animation-large{0%,to{background-color:var(--g-purple-50);
transform:translate(0)}12.5%{transform:translate(42.66px);z-index:2}25%{transform:translate(0);z-index:2}37.5%{transform:translateY(42.66px);
z-index:0}49.99%{background-color:var(--g-purple-50);transform:translate(0);z-index:0}50%{background-color:var(--g-green-50)}62.5%{transform:translate(42.66px);
z-index:2}75%{transform:translate(0);z-index:2}87.5%{transform:translateY(42.66px);z-index:0}99.99%{background-color:var(--g-green-50)}}.a-activity-indicator.-large .a-activity-indicator__bottom-box{animation-name:bottom-box-animation-large}.a-activity-indicator.-small .a-activity-indicator__bottom-box{animation-name:bottom-box-animation-small}@keyframes bottom-box-animation-small{0%,to{background-color:var(--g-purple-50);
transform:translate(0)}12.5%{transform:translate(16px);z-index:2}25%{transform:translate(0);z-index:2}37.5%{transform:translateY(16px);z-index:0}49.99%{background-color:var(--g-purple-50);transform:translate(0);z-index:0}50%{background-color:var(--g-green-50)}62.5%{transform:translate(16px);
z-index:2}75%{transform:translate(0);z-index:2}87.5%{transform:translateY(16px);z-index:0}99.99%{background-color:var(--g-green-50)}}

.a-activity-indicator.-large{height:8rem;width:8rem}

.a-activity-indicator.-small{height:3rem;width:3rem}