/* 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 {
  --ps-height: 48px;
  --border-width: 2px;
  box-sizing: border-box;
  position: relative;
  transition: transform 500ms ease-in-out;

  background: white;
  color: #202124;
  border-radius: 8px;
  cursor: pointer;
  width: fit-content;
  align-items: center;
  font-size: max(12px, calc(var(--ps-height) * 0.3));
  font-weight: bold;
  line-height: 1;
  display: flex;
  gap: calc(var(--ps-height) * 0.2);
  padding-inline: calc(var(--ps-height) * 0.25) calc(var(--ps-height) * 0.3);
  height: var(--ps-height);
  user-select: none;
  white-space: nowrap;

  img {
    display: block;
    flex-shrink: 0;
    width: calc(var(--ps-height) * 0.5);
    height: calc(var(--ps-height) * 0.5);
    pointer-events: none;
  }

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: var(--border-width);
    border-radius: inherit;
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    background: oklch(92.2% 0 none);
  }

  &.dark {
    background: black;
    color: white;

    &::before {
      background: oklch(26.9% 0 none);
    }
  }

  &:hover,
  &:focus-visible {
    transform: scale(105%);
    outline: none;

    &::before {
      background: conic-gradient(from var(--google-rainbow-angle), #4285f4, #34a853, #fbbc05, #ea4335, #4285f4);
      animation: google-rainbow-spin 1.5s linear infinite;
    }
  }
}