/*
 * The loader component.
 *
 * Edit this file. It is served as it is — nothing compiles it, and the
 * order it loads in is set in resources/css/order.php.
 */

.loader {
  align-items:center;
  display:flex;
  justify-content:center;
  left:50%;
  opacity:0;
  pointer-events:none;
  position:absolute;
  top:50%;
  transform:translate0(-50%);
  transition:opacity .3 ease;
  z-index:50;
}

.loader.is-active {
  opacity:1;
}

.loader__item {
  align-items:center;
  display:flex;
  justify-content:center;
}

.loader__frame,
.loader__frame-inner {
  aspect-ratio:1/1;
  position:relative;
  width:64px;
}

.loader__frame-inner:after,
.loader__frame-inner:before,
.loader__frame-inner>span:after,
.loader__frame-inner>span:before,
.loader__frame:after,
.loader__frame:before,
.loader__frame>span:after,
.loader__frame>span:before {
  background-color:#f1ede4;
  content:"";
  position:absolute;
  z-index:1;
}

.loader__frame-inner:before,
.loader__frame:before {
  animation:border-top 4s ease-in-out infinite;
  height:1px;
  left:0;
  top:0;
}

.loader__frame-inner:after,
.loader__frame:after {
  animation:border-right 4s ease-in-out infinite;
  right:0;
  top:0;
  width:1px;
}

.loader__frame-inner>span:before,
.loader__frame>span:before {
  animation:border-bottom 4s ease-in-out infinite;
  bottom:0;
  height:1px;
  right:0;
}

.loader__frame-inner>span:after,
.loader__frame>span:after {
  animation:border-left 4s ease-in-out infinite;
  bottom:0;
  left:0;
  width:1px;
}

.loader__frame-inner>span,
.loader__frame>span {
  display:block;
  inset:0;
  pointer-events:none;
  position:absolute;
}