.portfolio-pill-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--space-inline-tight);
  width: fit-content;
  min-height: var(--portfolio-pill-button-min-height);
  flex: none;
  padding: var(--space-component-y) var(--space-component-x);
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-action-soft);
  color: var(--color-text-primary);
  font-family: var(--font-brand);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-leading);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--portfolio-pill-button-motion) var(--portfolio-pill-button-ease), color var(--portfolio-pill-button-motion) var(--portfolio-pill-button-ease), box-shadow var(--portfolio-pill-button-motion) var(--portfolio-pill-button-ease);
}

.portfolio-pill-button.portfolio-pill-button--inverse {
  background: var(--color-inverse-button-background);
  color: var(--color-inverse-button-text);
}

.portfolio-pill-button.portfolio-pill-button--accent {
  background: var(--color-action);
  color: var(--color-action-contrast);
}

.portfolio-pill-button:disabled,
.portfolio-pill-button[aria-disabled="true"] {
  opacity: var(--opacity-disabled);
  cursor: wait;
}

.portfolio-pill-button__icon {
  display: block;
  width: var(--space-4);
  height: var(--space-4);
  flex: none;
  fill: currentColor;
  transition: transform var(--portfolio-pill-button-icon-motion) var(--portfolio-pill-button-ease);
}

@media (hover: hover) and (pointer: fine) {
  .portfolio-pill-button:not(:disabled):hover {
    background: var(--color-surface);
    color: var(--color-text-primary);
    box-shadow: inset 0 0 0 1px var(--color-focus);
  }

  .portfolio-pill-button:not(:disabled):hover .portfolio-pill-button__icon {
    transform: rotate(45deg);
  }
}

.portfolio-pill-button:focus-visible {
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: inset 0 0 0 1px var(--color-focus);
}

.portfolio-pill-button:focus-visible .portfolio-pill-button__icon {
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-pill-button,
  .portfolio-pill-button__icon {
    transition: none;
  }
}