:root {
  --loader-size: 150px;
  --loader-desktop-size: 250px;
  --text-color: #CECECE;
  /* Fill data-text */
  --color-one: #E00000;
  --color-two: #EAAD52;
  --color-three: #EA089C;
  --color-four: #80CAF7;
  --light-size: 5px;
}

/* █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ */
@use postcss-cssnext;

.Loader {
  position: relative;
  width: var(--loader-size, 150px);
  min-width: 110px;
  overflow: visible;
  margin: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.4), 0 0 25px rgba(255, 255, 255, 0.8);

  &::after {
    content: attr(data-text);
    color: var(--text-color, #CECECE);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-medium);
    font-size: 24px;
    line-height: 19.2px;
    background: linear-gradient(107.27deg, #fe0000 2.55%, #fe002a 29.33%, #fe0145 48.9%, #f8034e 53.02%, #e80b67 59.2%, #ce1890 66.4%, #aa29c8 75.67%, #883aff 83.91%, #4f81ff 94.21%, #07dcff 105.54%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    font-family: "better_togethermedium";
    width: 210px;
    text-align: center;
  }

  /* Keep ratio on resize*/
  &::before {
    content: '';
    float: left;
    padding-top: 100%;
  }
}

@media (min-width:992px) {
  .Loader {
    width: var(--loader-desktop-size, 250px);
  }
}



.Loader__Circle {
  display: block;
  position: absolute;
  border-radius: 50%;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  opacity: 0.8;
  mix-blend-mode: screen;
  filter: brightness(120%);
  animation-name: SpinAround;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-timing-function: linear;


  &:nth-of-type(1) {
    box-shadow:
      inset 1px 0 0 1px var(--color-one, #E00000),
      var(--light-size, 4px) 0 0 var(--light-size, 4px) var(--color-one, #E00000);
    animation-direction: reverse;
    transform-origin: 49.6% 49.8%;
  }


  &:nth-of-type(2) {
    box-shadow:
      inset 1px 0 0 1px var(--color-two, #EAAD52),
      var(--light-size, 4px) 0px 0 var(--light-size, 4px) var(--color-two, #EAAD52);
    transform-origin: 49.5% 49.8%;
  }

  &:nth-of-type(3) {
    box-shadow:
      inset 1px 0 0 1px var(--color-three, #EA089C),
      0 var(--light-size, 4px) 0 var(--light-size, 4px) var(--color-three, #EA089C);
    transform-origin: 49.8% 49.8%;
  }

  &:nth-of-type(4) {
    box-shadow:
      inset 1px 0 0 1px var(--color-four, #80CAF7),
      0 var(--light-size, 4px) 0 var(--light-size, 4px) var(--color-four, #80CAF7);
    transform-origin: 49.7% 49.7%;
  }
}



@keyframes SpinAround {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(-360deg);
  }
}

@use postcss-preset-env {
  stage: 0;
  browsers: [ "last 1 Chrome versions",
    "last 1 Firefox versions",
    "last 1 Safari versions",
    "last 1 Edge versions"
    ]
}