/* Numbered nameserver rows */
.domain-nameserver-list li + li {
  border-top: 1px solid var(--arp-border);
}

.domain-nameserver-number {
  min-width: var(--arp-space-5);
}

/* Pending change pill */
.tag.domain-change-pending {
  gap: var(--arp-space-2);
  background-color: var(--arp-status-info-bg);
  color: var(--arp-status-info-fg);
  font-weight: var(--bulma-weight-semibold);
}

.domain-change-pending-dot {
  position: relative;
  flex: none;
  width: var(--arp-space-2);
  height: var(--arp-space-2);
  border-radius: var(--arp-radius-full);
  background-color: var(--arp-accent);
}

.domain-change-pending-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: inherit;
  animation: domain-change-pending-pulse 1.6s ease-out infinite;
}

@keyframes domain-change-pending-pulse {
  0% { transform: scale(1); opacity: 0.55; }
  80%, 100% { transform: scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .domain-change-pending-dot::after {
    animation: none;
  }
}

.domain-nameservers-pending {
  opacity: 0.6;
}

/* Search results */
.domain-search-result,
.domain-search-row {
  border-top: 1px solid var(--arp-border);
}

.domain-search-result {
  background-color: var(--arp-accent-bg);
}

.domain-search-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.domain-search-status {
  flex: none;
  margin-right: var(--arp-space-3);
  border-radius: var(--arp-radius-full);
}

.domain-search-status.is-available {
  background-color: var(--arp-status-success-bg);
  color: var(--arp-status-success-fg);
}

.domain-search-result .domain-search-status.is-available {
  background-color: var(--arp-green-600);
  color: var(--bulma-white);
}

.domain-search-status.is-taken {
  background-color: var(--arp-status-neutral-bg);
  color: var(--arp-status-neutral-fg);
}

.domain-ideas {
  padding: 0 var(--arp-space-6) var(--arp-space-6);
}

.domain-idea {
  padding: var(--arp-space-3);
  border: 1px solid var(--arp-border);
  border-radius: var(--arp-radius-lg);
  background-color: var(--arp-surface-raised);
}

/* On phones, the search result is a centered stack with a full-width button,
   and ideas are divided rows like the popular extension rows */
@media screen and (max-width: 768px) {
  .domain-search-result .domain-search-status {
    margin: 0 0 var(--arp-space-2);
  }

  .domain-search-result .button {
    width: 100%;
  }

  .domain-ideas {
    padding: 0;
  }

  .domain-ideas .grid {
    --bulma-grid-gap: 0;
  }

  .domain-idea {
    padding: var(--arp-space-3) var(--arp-space-6);
    border-width: 1px 0 0;
    border-radius: 0;
    background-color: transparent;
  }
}