@innovaccer/design-system/css/src/ai-components/iconButton.module.css

React components library project for Innovaccer Design System

.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(
    315deg,
    rgba(227, 28, 121, 0.2) 0%,
    rgba(231, 56, 79, 0.32) 19.79%,
    rgba(240, 125, 0, 0.32) 100%
  );
  color: var(--secondary) !important;
}

.AIIconButton:active {
  background: linear-gradient(
    315deg,
    rgba(227, 28, 121, 0.31) 0%,
    rgba(231, 56, 79, 0.48) 19.79%,
    rgba(240, 125, 0, 0.48) 100%
  );
  color: var(--secondary-dark) !important;
}

.AIIconButton:focus,
.AIIconButton:focus-visible {
  box-shadow: var(--shadow-spread) var(--secondary-shadow);
  outline: none;
}

.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 */
}