@use '../../../theme/viewerDefs' as *;

.baseIconButton {
  aspect-ratio: 1;
  height: 2rem;
  width: 2rem;
  display: grid;
  place-content: center;

  border: 1px solid transparent;
  border-radius: 3px;

  cursor: pointer;
}

.subtle {
  background: $gray-1050;
  color: $blue-400;

  &:hover:not(:disabled):not(:active) {
    background: $gray-1000;
    color: $blue-500;
  }

  &:active:not(:disabled){
    background: $gray-1100;
    border-color: $gray-1250;
  }

  &:disabled {
    background: $gray-1050;
  }
}

.subtle-white {
  background: $gray-1050;
  color: $ui-white;

  &:hover:not(:disabled):not(:active) {
    background: $gray-1000;
    color: $ui-white;
  }

  &:active:not(:disabled) {
    background: $gray-1100;
    border-color: $gray-1250;
  }

  &:disabled {
    background: $gray-1050;
  }
}

.destructive {
  background: $red-700;
  color: $ui-white;

  &:hover:not(:disabled):not(:active) {
    background: $red-600;
    color: $ui-white;
  }

  &:active:not(:disabled) {
    background: $red-800;
    border-color: $red-900;
  }
}
