import { css } from "lit";

export const fixed = css`
  @keyframes sonic-loader--fixed {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    5% {
      opacity: 1;
    }
    70% {
      opacity: 90%;
    }
    100% {
      transform: scale(1);
      opacity: 0;
    }
  }

  .sonic-loader--fixed {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: transateY(-50%) translateX(-50%);
    z-index: 999;
  }

  .sonic-loader--fixed > div:nth-child(2) {
    animation-delay: -0.5s;
  }
  .sonic-loader--fixed > div:nth-child(3) {
    animation-delay: -0.2s;
  }

  .sonic-loader--fixed > div:nth-child(4) {
    display: none !important;
  }
  .sonic-loader--fixed > div {
    background-color: var(--sc-_loader-bg);
    width: 5rem;
    height: 5rem;
    border-radius: 100%;
    margin: 2px;
    animation-fill-mode: both;
    position: absolute;
    top: 0px;
    opacity: 0;
    margin: 0;
    top: -2.5rem;
    left: -2.5rem;
    width: 5rem;
    height: 5rem;
    animation: sonic-loader--fixed 1s 0s linear infinite;
  }
`;