/* Preferred Sources Button */
@property --google-rainbow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes google-rainbow-spin {
  to {
    --google-rainbow-angle: 360deg;
  }
}

.google-rainbow-btn {
  all: revert-layer !important;
  --ps-height: 48px;
  --border-width: 2px;
  box-sizing: border-box !important;
  position: relative !important;
  transition: transform 500ms ease-in-out !important;
  background: white !important;
  color: #202124 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  width: fit-content !important;
  align-items: center !important;
  font-size: max(12px, calc(var(--ps-height) * 0.3)) !important;
  font-weight: bold !important;
  line-height: 1 !important;
  display: flex !important;
  gap: calc(var(--ps-height) * 0.2) !important;
  padding-inline: calc(var(--ps-height) * 0.25) calc(var(--ps-height) * 0.3) !important;
  height: var(--ps-height) !important;
  user-select: none !important;
  white-space: nowrap !important;
}

.google-rainbow-btn img {
  all: revert-layer !important;
  display: block !important;
  flex-shrink: 0 !important;
  width: calc(var(--ps-height) * 0.5) !important;
  height: calc(var(--ps-height) * 0.5) !important;
  pointer-events: none !important;
}

.google-rainbow-btn::before {
  all: revert-layer !important;
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  padding: var(--border-width) !important;
  border-radius: inherit !important;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  mask-composite: exclude !important;
  pointer-events: none !important;
  background: oklch(92.2% 0 none) !important;
}

.google-rainbow-btn.dark {
  background: black !important;
  color: white !important;
}

.google-rainbow-btn.dark::before {
  background: oklch(26.9% 0 none) !important;
}

.google-rainbow-btn:hover,
.google-rainbow-btn:focus-visible {
  transform: scale(105%) !important;
  outline: none !important;
}

.google-rainbow-btn:hover::before,
.google-rainbow-btn:focus-visible::before {
  background: conic-gradient(from var(--google-rainbow-angle), #4285f4, #34a853, #fbbc05, #ea4335, #4285f4) !important;
  animation: google-rainbow-spin 1.5s linear infinite !important;
}