@use '../../styles/utils' as *

.loader_container
  justify-content: space-around
  z-index: 3

  .loader_squares
    display: flex
    position: relative
    transform: rotate(45deg)
    width: $size-80px
    height: $size-80px

    .square_one,
    .square_two,
    .square_three,
    .square_four
      width: $size-40px
      height: $size-40px
      position: absolute
      animation: widen 1.3s infinite ease-in
      border-radius: $size-8px
      border: $size-2px solid $primary

    .square_one
      top: 0
      left: 0

    .square_two
      top: 0
      left: $size-48px

    .square_three
      top: $size-48px
      left: 0

    .square_four
      top: $size-48px
      left: $size-48px

    @keyframes widen
      0%
        position: absolute
        transform: rotate(0deg)

      50%
        top: $size-24px
        left: $size-24px
        position: absolute
        opacity: $alpha-five

      100%
        position: absolute
        transform: rotate(360deg)