.spinner {
  width: 50px;
  height: 40px;

  font-size: 10px;
  margin: var(--spacing-small);
  text-align: center;

  .rect {
    width: 6px;
    height: 100%;

    animation: sk-stretchdelay 1.2s infinite ease-in-out;
    display: inline-block;
    margin: 0 2px;

    &.rect2 {
      animation-delay: -1.1s;
    }

    &.rect3 {
      animation-delay: -1s;
    }

    &.rect4 {
      animation-delay: -0.9s;
    }

    &.rect5 {
      animation-delay: -0.8s;
    }
  }
}

.spinner--dark {
  .rect {
    background-color: $lbry-black;
  }
}

.spinner--light {
  .rect {
    background-color: $lbry-white;

    [data-mode='dark'] & {
      background-color: var(--dm-color-01);
    }
  }
}

.spinner--small {
  height: 10px;
  display: inline-block;

  .rect {
    width: 3px;
  }
}

.spinner--splash {
  margin-top: var(--spacing-large);

  .rect {
    background-color: $lbry-white;
  }
}