.AIIconButton {
  background: transparent;
  padding: var(--spacing-20);
  border-radius: var(--border-radius-10);
  cursor: pointer;
  border: 0;
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size);
  line-height: var(--font-height-s);
  position: relative;
}

.AIIconButton--large {
  padding: var(--spacing-0-75);
}

.AIIconButton--regular {
  padding: var(--spacing);
}

.AIIconButton:hover {
  background: linear-gradient(143deg, #fad1b2 10.84%, #f8c4c1 51.71%, #f8c8d7 91.5%);
  color: var(--secondary) !important;
}

.AIIconButton:active {
  background: linear-gradient(144deg, #f7ba8c 14.82%, #f6af98 40.53%, #f5a8a0 55.69%, #f5adc5 79.29%);
  color: var(--secondary-dark) !important;
}

.AIIconButton:focus {
  outline: var(--border-width-05) solid var(--primary-focus);
  outline-offset: var(--spacing-05);
}

.AIIconButton:disabled {
  cursor: not-allowed;
  background: transparent;
  color: var(--inverse-lightest);
}

.AIIconButton-icon {
  overflow: hidden;
  flex-shrink: 0;
  user-select: none;
  line-height: inherit;
  display: flex;
  align-items: center;
  position: relative;
}

.AIIconButton-AIIcon {
  position: absolute;
}

.AIIconButton-AIIcon--regularTop {
  bottom: calc(var(--spacing-30) + var(--spacing-05)); /* 14px */
  left: calc(var(--spacing-30) + var(--spacing-2-5)); /* 13px */
}

.AIIconButton-AIIcon--largeTop {
  bottom: calc(var(--spacing-40) + var(--spacing-05)); /* 18px */
  left: calc(var(--spacing-40) + var(--spacing-2-5)); /* 17px */
}

.AIIconButton-AIIcon--regularBottom {
  top: calc(var(--spacing-30) + var(--spacing-2-5)); /* 13px */
  left: calc(var(--spacing-30) + var(--spacing-05)); /* 14px */
}

.AIIconButton-AIIcon--largeBottom {
  top: calc(var(--spacing-40) + var(--spacing-2-5)); /* 17px */
  left: calc(var(--spacing-40) + var(--spacing-05)); /* 18px */
}