.iconButton {
  color: var(--base-white);
  border-radius: 0.25rem;
  background: var(--base-white);
  /* Shadow/xs */
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);

  display: inline-flex;
  padding: 0.5rem;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  &:focus,
  &:focus-visible {
    outline: none;
    box-shadow: 0 0 4px 4px rgba(66, 210, 243, 0.4);
  }

  &:disabled {
    background: var(--button-color-bg-disabled);
    border: 1px solid var(--button-color-bg-disabled);
    color: var(--button-color-disabled);
  }

  &:global(.round) {
    border-radius: 50%;
  }

  svg {
    height: 1rem;
    fill: var(--base-white);
  }

  &.sm {
    padding: 0.25rem;

    svg {
      height: 0.75rem;
    }
  }

  &.lg {
    svg {
      height: 1.5rem;
    }
  }

  &.tertiary {
    background: transparent;
    border: none;
    box-shadow: none;
    svg {
      fill: var(--button-icon-tertiary-color-svg);
    }
    &:focus,
    &:focus-visible {
      border: 2px solid var(--button-icon-tertiary-color-border-focus);
      background: var(--button-icon-tertiary-color-bg-focus);
      padding: calc(0.5rem - 2px);
    }
    &:hover {
      background: var(--button-icon-tertiary-color-bg-hover);
    }
  }

  &.alert {
    border: 1px solid var(--color-error);
    background: var(--color-error);
    svg {
      fill: var(--base-white);
    }
  }

  &.secondary {
    svg {
      fill: black;
    }
    border: 1px solid var(--bg-gray-darkest);
    background: white;
    /* Shadow/xs */

    &:focus,
    &:focus-visible {
      outline: none;
      box-shadow: 0 0 4px 4px rgba(66, 210, 243, 0.4);
    }

    &:disabled {
      background: var(--button-color-bg-disabled);
      border: 1px solid var(--button-color-bg-disabled);
      color: var(--button-color-disabled);
    }
  }
}
