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

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

@layer preferred-sources {
  .google-rainbow-btn {
    @layer {
      --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;
    }
    all: revert-layer !important;
  }

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

  .google-rainbow-btn::before {
    @layer {
      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);
    }
    all: revert-layer !important;
  }

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

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

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

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