@use '~/styles/utils/custom-media' as *;

h2.sectionNameType {
  margin: 0;
  font-size: 1em;
  @media (--breakpoint-not-small) {
    font-size: 1.3em;
  }

  span:nth-child(2) {
    font-size: 12px;
    color: #777;
    font-weight: normal;
    margin: 0 0.3em;
  }
}

@mixin light {
  --loading-dot-1-1: rgba(0, 0, 0, 0.1);
  --loading-dot-1-2: rgba(0, 0, 0, 0.5);
  --loading-dot-1-3: rgba(0, 0, 0, 0.3);
  --loading-dot-2-1: rgba(0, 0, 0, 0.3);
  --loading-dot-2-2: rgba(0, 0, 0, 0.1);
  --loading-dot-2-3: rgba(0, 0, 0, 0.5);
  --loading-dot-3-1: rgba(0, 0, 0, 0.5);
  --loading-dot-3-2: rgba(0, 0, 0, 0.3);
  --loading-dot-3-3: rgba(0, 0, 0, 0.1);
}

@mixin dark {
  --loading-dot-1-1: rgba(255, 255, 255, 0.5);
  --loading-dot-1-2: rgba(255, 255, 255, 0.1);
  --loading-dot-1-3: rgba(255, 255, 255, 0.3);
  --loading-dot-2-1: rgba(255, 255, 255, 0.3);
  --loading-dot-2-2: rgba(255, 255, 255, 0.5);
  --loading-dot-2-3: rgba(255, 255, 255, 0.1);
  --loading-dot-3-1: rgba(255, 255, 255, 0.1);
  --loading-dot-3-2: rgba(255, 255, 255, 0.3);
  --loading-dot-3-3: rgba(255, 255, 255, 0.5);
}

:root[data-theme='auto'] {
  @media (prefers-color-scheme: dark) {
    @include dark;
    color-scheme: dark;
  }
  @media (prefers-color-scheme: light) {
    @include light;
    color-scheme: light;
  }
}

:root[data-theme='dark'] {
  @include dark;
  color-scheme: dark;
}

:root[data-theme='light'] {
  @include light;
  color-scheme: light;
}

.loadingDot,
.loadingDot:before,
.loadingDot:after {
  display: inline-block;
  vertical-align: middle;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  font-size: 0;
}

.loadingDot {
  $d: 1s;

  position: relative;
  background-color: var(--loading-dot-2-1);
  animation: dot2 $d step-start infinite;
  &:before {
    content: '';
    position: absolute;
    left: -12px;
    background-color: var(--loading-dot-1-1);
    animation: dot1 $d step-start infinite;
  }
  &:after {
    content: '';
    position: absolute;
    right: -12px;
    background-color: var(--loading-dot-3-1);
    animation: dot3 $d step-start infinite;
  }
}

@keyframes dot1 {
  0%,
  100% {
    background-color: var(--loading-dot-1-1);
  }
  33% {
    background-color: var(--loading-dot-1-2);
  }
  66% {
    background-color: var(--loading-dot-1-3);
  }
}

@keyframes dot2 {
  0%,
  100% {
    background-color: var(--loading-dot-2-1);
  }
  33% {
    background-color: var(--loading-dot-2-2);
  }
  66% {
    background-color: var(--loading-dot-2-3);
  }
}

@keyframes dot3 {
  0%,
  100% {
    background-color: var(--loading-dot-3-1);
  }
  33% {
    background-color: var(--loading-dot-3-2);
  }
  66% {
    background-color: var(--loading-dot-3-3);
  }
}