/*Genral Button Style*/
.btn {
  display: inline-block;
  align-items: center;
  background: none;
  border: 1px solid #bdbdbd;
  height: 48px;
  letter-spacing: 0.25px;
  border-radius: 24px;
  cursor: pointer;
}

.btn:focus {
  outline: none;
}

.btn .mdi {
  margin-right: 5px;
  margin-left: 5px;
}

/*Delete Button Style*/
.btn-delete {
  font-size: 16px;
  color: red;
}

.btn-delete:hover,   .btn-delete:focus {
  background-color: var(--btn-hover-bg-color);
}

.btn-delete > .mdi-delete-empty {
  display: none;
}

.btn-delete:hover > .mdi-delete-empty {
  display: inline-block;

}
.btn-delete:hover > .mdi-delete {
  display: none;
}

/*Info Button Style*/
.btn-info {
  font-size: 16px;
  color: skyblue;
}

.btn-info > .mdi-information {
  display: none;
}

.btn-info:hover > .mdi-information {
  display: inline-block;
}

.btn-info:hover > .mdi-information-outline {
  display: none;
}