.m-button {
  text-decoration: none;
  display: inline-block;
}

.m-button .m-button__btn,
.m-button__btn--delete{
  display: flex;
  padding: 10px 16px;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  justify-content: center;
  border-radius: 8px;
  margin: auto;
  border: solid 1px;
}

.m-width-100{
  display: inherit;
}

.m-width-100 .m-button__btn{
  width: 100%;
}

.m-button.width_btn-auto{
  width: auto;
}

.m-button path {
  /* stroke: var(--color-white-01); */
  fill: var(--color-white-01);
}

.m-button__icon svg {
  transform: scale(1);
  transition: 0.35s;
}

.m-button:hover .m-button__icon svg{
  transform: scale(1.2);
  transition: 0.35s;
} 

/** Boont types */

.primary-botton{
  background-color: var(--color-secondary);
  color: var(--color-white-01);
  transition: 0.35s;
  border: solid 0px var(--color-primary) !important;
}

.primary-botton:hover{
  background-color: var(--color-primary);
}

.secundary-button{
  background-color: transparent;
  color: var(--color-primary);
  border: solid 1px var(--color-primary) !important;
}

.secundary-button path{
  fill: var(--color-primary);
}

.white-botton{
  background-color: var(--color-white-02);
  color: var(--color-black-01);
  font-size: var(--font-size-regular) !important;
}

.danger-botton,
.m-button__btn--delete{
  background-color: var(--observatorio-danger);
  color: var(--color-white-01);
}

.m-button--disable .m-button__btn{
  cursor: not-allowed;
  background: var(--color-grey-01);
}