.popover-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
  padding: 0.5rem;
  border-radius: 0.5rem;
  color: var(--color-blue-600);
}

.popover-toggle:hover {
  background-color: var(--color-gray-100);
}

.popover-toggle:active {
  background-color: var(--color-gray-100);
}

.popover {
  position: fixed;
  inset: auto;
  top: anchor(bottom);
  right: anchor(right);
  margin: 0;
  border: 1px solid var(--color-gray-100);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  background-color: var(--color-white);
  border-radius: 0.375rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 0 1px var(--color-gray-100 / 0.05);
  opacity: 0;
  transform: scale(0.95) translateY(0.5rem);
  transition: opacity 0.1s ease-out, transform 0.1s ease-out,
    display 0.1s allow-discrete, overlay 0.1s allow-discrete;
}

.popover:popover-open {
  opacity: 1;
  transform: scale(1) translateY(0.5rem);
}

@starting-style {
  .popover:popover-open {
    opacity: 0;
    transform: scale(0.95) translateY(0.5rem);
  }
}

.popover--align-left {
  left: anchor(left);
  right: auto;
}