.loading {
  --loading-size: calc(var(--gap) * 6);
}

.loading::after {
  content: "";
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--gap) * 0.3);
  background-color: var(--loading-color, var(--primary-color));
  z-index: 1000;
  border-radius: 2pc;
  animation: loading 1s ease-in-out infinite;
}

go-view#view-loader {
  overflow: hidden;
}

go-view#view-loader + go-view#view-loader {
  opacity: 0;
}

.loading {
  --loading-size: calc(var(--gap) * 6);
}

app-menu .loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  overflow: hidden;
}

go-view#view-loader + go-view#view-loader {
  opacity: 0;
}

.View.GoLoader .ViewBackground {
  background-color: rgb(0 0 0 / 10%);
}

.errorCard,
.bottomDelayIn,
menu-category,
app-menu app-item,
.menuCategories .category {
  animation: item-bottom-in 0.6s ease;
  animation-fill-mode: forwards;
  animation-delay: calc(var(--time, 0ms));
  transform: translateX(0) translateY(var(--item-height, 120px));
  opacity: 0;
}

.animateZoomIn {
  animation: item-zoom-in 0.6s ease;
  animation-fill-mode: forwards;
  animation-delay: calc(var(--time, 0ms));
  transform: scale(0.5);
  opacity: 0;
}

.scroll-zoom-in,
[scroll-zoom-in] {
  view-timeline-name: --zoom-in;
  animation-name: scroll-zoom-in;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  view-timeline-axis: block;
  animation-range: entry 20% cover 50%;
  animation-timeline: --zoom-in;
}

.scroll-bottom-in,
[scroll-bottom-in] {
  view-timeline-name: --bottom-in;
  animation-name: scroll-bottom-in;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  view-timeline-axis: block;
  animation-range: entry 20% cover 50%;
  animation-timeline: --bottom-in;
}

.scroll-left-in,
[scroll-left-in] {
  view-timeline-name: --left-in;
  animation-name: scroll-left-in;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  view-timeline-axis: block;
  animation-range: entry 20% cover 50%;
  animation-timeline: --left-in;
}

.scroll-right-in,
[scroll-right-in] {
  view-timeline-name: --right-in;
  animation-name: scroll-right-in;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  view-timeline-axis: block;
  animation-range: entry 20% cover 50%;
  animation-timeline: --right-in;
}

.scroll-video-show,
[scroll-video-show] {
  view-timeline-name: --video-reveal;
  animation-name: video-show;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  view-timeline-axis: block;
  animation-range: entry 0% cover 35%;
  animation-timeline: --video-reveal;
}

.scroll-fade-in,
[scroll-fade-in] {
  view-timeline-name: --fade-in;
  animation-name: scroll-fade-in;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  view-timeline-axis: block;
  animation-range: entry 20% cover 50%;
  animation-timeline: --fade-in;
}
.skeleton-loading,
[skeleton-loading] {
  animation: skeleton-loading 1s linear infinite alternate;
  color: rgba(0, 0, 0, 0);
  background-color: hsl(200, 20%, 70%);
}

.skeleton-loading *,
[skeleton-loading] * {
  color: rgba(0, 0, 0, 0);
  fill: rgba(0, 0, 0, 0);
  opacity: 0;
}

@keyframes scroll-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scroll-left-in {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scroll-right-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scroll-zoom-in {
  from {
    opacity: 0;
    scale: 25%;
  }
  to {
    opacity: 1;
    scale: 100%;
  }
}

@keyframes scroll-bottom-in {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}

@keyframes item-zoom-in {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes item-bottom-in {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(var(--item-height, 120px));
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

@keyframes loading {
  50% {
    width: 100%;
  }

  100% {
    width: 0;
    right: 0;
    left: unset;
  }
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes userAvatar {
  from {
    transform: scale(0.5);
  }
  to {
    transform: scale(1);
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes item-list-in {
  from {
    transform: translate(0, var(--along));
  }
  to {
    transform: translate(0, 0);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes video-show {
  from {
    transform: scale(200%) translateY(35%);
  }
  to {
    transform: scale(100%) translateY(0%);
  }
}

@keyframes skeleton-loading {
  0% {
    background-color: hsl(200, 20%, 70%);
  }
  100% {
    background-color: hsl(200, 20%, 95%);
  }
}

@keyframes loading {
  0% {
    left: 0;
    width: 0;
  }
  50% {
    left: 0;
    width: 100%;
  }
  100% {
    left: 100%;
    width: 0;
  }
}