energylink/public/sass/components/_delete_button.scss

.delete-button-container {
  max-width: 24px;
  width: 24px;
  direction: rtl;
  max-height: 38px;
  display: block;
}

.confirm-delete-container {
  overflow: hidden;
  width: 145px;
  display: block;
}

.delete-button {
  &--show {
    display: inline-block;
    opacity: 1;
    transition: opacity 0.1s ease;
  }

  &--hide {
    display: inline-block;
    opacity: 0;
    transition: opacity 0.1s ease;
  }
  &--removed {
    display: none;
  }
}

.confirm-delete {
  &--show {
    display: inline-block;
    opacity: 1;
    transition: opacity 0.08s ease-out, transform 0.1s ease-out;
    transform: translateX(0);
  }

  &--hide {
    display: inline-block;
    opacity: 0;
    transition: opacity 0.12s ease-in, transform 0.14s ease-in;
    transform: translateX(100px);
  }
  &--removed {
    display: none;
  }
}