/* Approved loading option 2: original brand motion with sequential dots. */
.ytm-loader {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  position: relative;
  width: var(--ytm-loader-size);
  height: var(--ytm-loader-size);
  border-radius: var(--ytm-loader-radius);
  isolation: isolate;
  transform-origin: 50% 50%;
  animation: ytm-loader-breathe 2400ms cubic-bezier(.45, 0, .35, 1) infinite;
}

.ytm-loader__logo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.ytm-loader::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(112deg,
    transparent 33%,
    rgb(224 216 255 / 0) 41%,
    rgb(224 216 255 / .25) 50%,
    rgb(224 216 255 / 0) 59%,
    transparent 67%);
  background-size: 320% 100%;
  background-position: 100% 0;
  animation: ytm-loader-light 2400ms cubic-bezier(.4, 0, .2, 1) infinite;
}

.ytm-loader--photo {
  --ytm-loader-size: 60px;
  --ytm-loader-radius: 12px;
}

.ytm-loader--button {
  --ytm-loader-size: 32px;
  --ytm-loader-radius: 6px;
}

@keyframes ytm-loader-breathe {
  0%, 100% { transform: scale(.985); }
  46% { transform: scale(1.025); }
}

@keyframes ytm-loader-light {
  0%, 9% { background-position: 100% 0; opacity: 0; }
  20% { opacity: 1; }
  66% { background-position: 0% 0; opacity: 1; }
  76%, 100% { background-position: 0% 0; opacity: 0; }
}

/* Use this attribute on the component for a static fallback. */
.ytm-loader[data-motion="off"] {
  animation: none;
  transform: none;
}
.ytm-loader[data-motion="off"]::after { animation: none; display: none; }

@media (prefers-reduced-motion: reduce) {
  .ytm-loader { animation: none; transform: none; }
  .ytm-loader::after { animation: none; display: none; }
}

.brand-loading { --ytm-loader-size: 84px; --ytm-loader-radius: 16px; --ytm-dot-size: 7px; --ytm-dot-gap: 7px; --ytm-mark-gap: 20px; display: inline-flex; flex: 0 0 auto; flex-direction: column; align-items: center; gap: var(--ytm-mark-gap); vertical-align: middle; animation: ytm-loading-appear 1ms 200ms both; }
.brand-loading .ytm-loader { width: var(--ytm-loader-size); height: var(--ytm-loader-size); border-radius: var(--ytm-loader-radius); }
.brand-loading .ytm-loader > .ytm-loader__logo { position: static; inset: auto; width: 100%; height: 100%; max-width: none; object-fit: contain; border-radius: inherit; }
.brand-loading__dots { display: flex; direction: ltr; gap: var(--ytm-dot-gap); }
.brand-loading__dots > span { width: var(--ytm-dot-size); height: var(--ytm-dot-size); border-radius: 50%; background: #6044c6; animation: ytm-loading-dot 1200ms ease-in-out infinite; }
.brand-loading__dots > span:nth-child(2) { animation-delay: 160ms; }
.brand-loading__dots > span:nth-child(3) { animation-delay: 320ms; }
.brand-loading--photo { --ytm-loader-size: 32px; --ytm-loader-radius: 6px; --ytm-dot-size: 4px; --ytm-dot-gap: 4px; --ytm-mark-gap: 6px; }
.brand-loading--compact { --ytm-loader-size: 60px; --ytm-loader-radius: 12px; --ytm-mark-gap: 12px; --ytm-dot-size: 6px; --ytm-dot-gap: 6px; }
.brand-loading--button { --ytm-loader-size: 24px; --ytm-loader-radius: 5px; --ytm-mark-gap: 4px; --ytm-dot-size: 3px; --ytm-dot-gap: 3px; }
.button[aria-busy="true"] { gap: 12px; cursor: wait; }
.ytm-wait { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; }
.ytm-wait > p { margin: 0; }
.ytm-wait .ytm-loader { margin: 0; }
@keyframes ytm-loading-dot { 0%, 60%, 100% { transform: translateY(0) scale(.8); opacity: .3; } 28% { transform: translateY(-3px) scale(1); opacity: 1; } }
@keyframes ytm-loading-appear { from { opacity: 0; } to { opacity: 1; } }
.brand-loading[data-motion="off"] { animation: none; }
.brand-loading[data-motion="off"] .ytm-loader { animation: none; transform: none; }
.brand-loading[data-motion="off"] .ytm-loader::after { animation: none; display: none; }
.brand-loading[data-motion="off"] .brand-loading__dots > span { animation: none; transform: none; opacity: .65; }
@media (prefers-reduced-motion: reduce) {
  .brand-loading { animation: none; }
  .brand-loading__dots > span { animation: none; transform: none; opacity: .65; }
}
@media (max-width: 599px) { .cover-panel__placeholder .brand-loading { --ytm-loader-size: 44px; --ytm-loader-radius: 9px; --ytm-mark-gap: 9px; --ytm-dot-size: 5px; --ytm-dot-gap: 5px; } }

.button .brand-loading__dots > span { background: #fff; }