@use 'sass:math';


.daily-kanji {

  .info {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 0.5em;
    gap: 1em;
  }

  .info-key {
    font-weight: 700;
  }

  .info-char {
    align-self: flex-start;
    position: relative;
    padding: 0.1em;
    border: 1px dashed black;
    font-family: serif;
    font-size: 5rem;
    line-height: 1em;

    &::before {
      top: -0.01em;
      left: 0.6em;
      width: 0;
      height: 100%;
      border-right: 1px dashed #000;
    }
    &::after {
      top: 0.6em;
      left: -0.01em;
      width: 100%;
      height: 0;
      border-top: 1px dashed #000;
    }
    &::before, &::after {
      content: '';
      position: absolute;
      display: block;
    }
  }

  .examples-ja {
    padding-right: 0.5em;
  }

  $side: 5em;
  $radius: math.div($side, 2);

  .spinner-wrap {
    display: flex;
    justify-content: center;
    margin-top: 1em;
  }

  .spinner {
    display: inline-block;
    position: relative;
    width: $side;
    height: $side;

    div {
      animation: loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
      transform-origin: $radius  $radius;

      &::after {
        content: '';
        display: block;
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #000;
        margin: -4px 0 0 -4px;
      }

      @for $i from 1 through 8 {
        $angle: 15deg * $i;

        &:nth-child(#{$i}) {
          animation-delay: -0.036s * $i;

          &::after {
            top: $radius + math.sin($angle) * $radius;
            left: $radius + math.cos($angle) * $radius;
          }
        }
      }
    }
  }

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