/**
 * Media queries can't use custom CSS properties, so we use a Sass variable
 * instead to define/apply our breakpoints.
 */
/**
 * From https://github.com/twbs/bootstrap/blob/main/scss/mixins/_breakpoints.scss
 */
sharpen-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 15px;
  width: 159px;
  height: 159px;
  margin-left: auto;
  margin-right: auto;
}
sharpen-loading .dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  animation: wave 1.3s linear infinite;
  background-color: var(--color-mint);
}
sharpen-loading .dot:nth-child(2) {
  animation-delay: -1.1s;
  background-color: #0f3e88;
}
sharpen-loading .dot:nth-child(3) {
  animation-delay: -0.9s;
  background-color: #3F3148;
}

@keyframes wave {
  0%, 60%, 100% {
    transform: initial;
  }
  30% {
    transform: translateY(-15px);
  }
}