/* stylelint-disable */
@layer drv.components.loading {
  .drv-loading {
    display: grid;
    position: fixed;
    z-index: 9;
    align-content: center;
    background-color: color-mix(in srgb, var(--drv-color-ui-01, #ffffff) 80%, transparent);
    text-align: center;
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
    inset: 0;
    justify-items: center;
  }
  .drv-loading__info {
    opacity: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .drv-loading__info {
      opacity: 1;
    }
  }
  .drv-loading__text {
    font-size: var(--drv-font-label-01-sm-font-size, 0.875rem);
    line-height: var(--drv-font-label-01-sm-line-height, 1.5);
    letter-spacing: var(--drv-font-label-01-sm-letter-spacing, 0.5px);
    font-weight: var(--drv-font-label-01-sm-font-weight, var(--drv-font-weight-bold, 600));
    margin-block-start: var(--drv-spacing-10, 4rem);
    text-align: center;
  }
  @media (min-width: 64.0625rem) {
    .drv-loading__text {
      font-size: var(--drv-font-label-01-lg-font-size, 0.9375rem);
      line-height: var(--drv-font-label-01-lg-line-height, 1.5333333333);
    }
  }
  @supports not ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
    .drv-loading__text {
      -webkit-text-stroke: var(--drv-spacing-03, 0.5rem) #ffffff;
      paint-order: stroke fill;
    }
  }
  @media (min-width: 37.5rem) {
    .drv-loading__text {
      margin-block-start: var(--drv-spacing-11, 6rem);
    }
  }
  @media (max-width: 19.98rem) {
    .drv-loading__text {
      margin-block-start: var(--drv-spacing-05, 1rem);
    }
  }
  .drv-loading[aria-busy=false] {
    transition-timing-function: cubic-bezier(0, 0, 0.4, 1);
    z-index: -1;
    animation-name: fadeOut;
    animation-duration: 200ms;
    animation-fill-mode: both;
  }
  .drv-logo--small {
    overflow: visible;
    transform: translateZ(0);
    cursor: wait;
  }
  @media (max-width: 37.48rem) {
    .drv-logo--small {
      block-size: 84px;
      inline-size: 80px;
    }
  }
  .drv-logo--small__part1 {
    transition-timing-function: cubic-bezier(0.5, 0, 1, 1);
    animation-name: logo-ani1;
    animation-duration: 1400ms;
    animation-iteration-count: infinite;
  }
  .drv-logo--small__part2 {
    transition-timing-function: cubic-bezier(0.5, 0, 1, 1);
    animation-name: logo-ani2;
    animation-duration: 1400ms;
    animation-iteration-count: infinite;
  }
  @keyframes logo-ani1 {
    60% {
      transform: translate(-10px, -10px) translateZ(0);
    }
  }
  @keyframes logo-ani2 {
    60% {
      transform: translate(10px, 10px) translateZ(0);
    }
  }
  @keyframes fadeOut {
    to {
      opacity: 0;
    }
  }
  .drv-loading--progress {
    display: grid;
    place-items: center;
    color: var(--drv-color-interactive-01, #083163);
  }
  .drv-loading--progress > * {
    grid-column: 1/-1;
    grid-row: 1/-1;
  }
  .drv-loading--progress__graphic {
    animation: fadein 0.5s ease-in 0s forwards;
  }
  .drv-loading--progress__graphic > * {
    fill: none;
  }
  .drv-loading--progress__graphic .circle-animated {
    transition: stroke-dashoffset 0.1s linear;
    stroke-dashoffset: calc(235px - var(--drv-loading-progress, 235px));
  }
  .drv-loading--progress .drv-loading__progress {
    animation: fadein 0.5s ease-in 0s forwards;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
  }
  .drv-loading--progress-finished .drv-loading--progress__graphic {
    transform: scale(1);
    animation: none;
    opacity: 1;
  }
  .drv-loading--progress-finished .tick {
    animation: dashout 0.5s ease-out 0.15s forwards;
  }
  .drv-loading--progress-finished .circle-animated {
    stroke-dashoffset: 0;
  }
  .drv-loading--progress-finished .drv-loading__progress {
    animation: fadeOut 150ms ease-in 0s forwards;
  }
  @keyframes dashout {
    to {
      stroke-dashoffset: 0;
    }
  }
  @keyframes fadein {
    from {
      transform: scale(0);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }
  .drv-loading-host {
    display: inline;
  }
}