@import '../../../../globals/variables';
@import '../../../../globals/sizes';

.icon-button {
  align-items: center;
  border: none;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  padding: 0;
  transition: opacity 0.2s ease;
  vertical-align: middle;

  &:disabled {
    cursor: not-allowed;
    opacity: $ads-state-disabled-opacity;
  }

  &:not(:disabled):hover {
    opacity: $ads-state-hover-opacity;
  }

  > * {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    pointer-events: none;
    width: 100%;
  }
}

.xs {
  height: $ads-size-xs;
  width: $ads-size-xs;
}

.sm {
  height: $ads-size-sm;
  width: $ads-size-sm;
}

.md {
  height: $ads-size-md;
  width: $ads-size-md;
}

.lg {
  height: $ads-size-lg;
  width: $ads-size-lg;
}

.square {
  border-radius: 0;
}

.rounded {
  border-radius: $ads-border-radius-rounded;
}

.circle {
  border-radius: $ads-border-radius-circle;
}

.neutral {
  background-color: $ads-color-neutral-bg;
  color: $ads-color-black-700;

  &:disabled {
    color: $ads-color-disabled-icon;
  }
}

.brand {
  background-color: $ads-color-brand-bg;
  color: $ads-color-brand-icon;

  &:disabled {
    color: $ads-color-disabled-icon;
  }
}

.feedback {
  background-color: $ads-warning-main;
  color: $ads-color-black-700;

  &:disabled {
    color: $ads-color-disabled-icon;
  }
}
