.iconButton {
  --transitionDuration: 300ms;

  cursor: pointer;

  position: relative;

  padding: 0;

  background-color: transparent;
  border: 1px solid transparent;

  &--sm {
    width: 26px;
    height: 26px;
  }

  &--md {
    width: 32px;
    height: 32px;
  }

  &--lg {
    width: 48px;
    height: 48px;
  }

  &--primary {
    color: rgb(var(--foreground--controls-medium-default--light));
    border-color: rgb(var(--border--controls-medium-default--light));

    &:hover {
      color: rgb(var(--foreground--controls-medium-hovered--light));
      border-color: rgb(var(--border--controls-medium-hovered--light));
    }

    &--disabled {
      cursor: default;
      color: rgb(var(--foreground--neutral-medium-default--light));
      border-color: rgb(var(--border--neutral-high-default--light));
    }
  }

  &--secondary {
    color: rgb(var(--foreground--neutral-full-default--light));
    border-color: rgb(var(--border--neutral-high-default--light));

    &:hover {
      color: rgb(var(--foreground--neutral-full-hovered--light));
      border-color: rgb(var(--border--neutral-full-hovered--light));
    }

    &--disabled {
      cursor: default;
      color: rgb(var(--foreground--neutral-medium-default--light));
      border-color: rgb(var(--border--neutral-high-default--light));
    }
  }

  &--action {
    color: rgb(var(--foreground--main-medium-default--light));
    border-color: rgb(var(--border--main-medium-default--light));

    &:hover {
      color: rgb(var(--foreground--main-medium-hovered--light));
      border-color: rgb(var(--border--main-medium-hovered--light));
    }

    &--disabled {
      cursor: default;
      color: rgb(var(--foreground--neutral-medium-default--light));
      border-color: rgb(var(--border--neutral-high-default--light));
    }
  }

  &--destructive {
    color: rgb(var(--foreground--critical-high-default--light));
    border-color: rgb(var(--border--critical-high-default--light));

    &:hover {
      color: rgb(var(--foreground--critical-high-hovered--light));
      border-color: rgb(var(--border--critical-high-hovered--light));
    }

    &--disabled {
      cursor: default;
      color: rgb(var(--foreground--neutral-medium-default--light));
      border-color: rgb(var(--border--neutral-high-default--light));
    }
  }

  &--ghost,
  &--ghost:hover {
    border-color: transparent;
  }

  & > .loader {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    margin: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    --transitionDuration: 0ms;
  }
}

.iconButton > .icon {
  transition-timing-function: ease-out;
  transition-duration: var(--transitionDuration);
  transition-property: opacity;
}

.iconButton--isLoading > .icon {
  opacity: var(--blend--full--light);
}