.modern-button {
  border-radius: 8px;
  padding: 14px 20px 15px 20px;
  font-size: 16px;
  color: #000000;
  fill: #000000;
  transition: background-color 0.1s ease, color 0.1s ease, fill 0.1s ease;
  text-decoration: none;
  background-color: #FFFFFF;
  display: flex;
  cursor: pointer;
  box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, .132), 0 .3px .9px 0 rgba(0, 0, 0, .108);
}

  .modern-button:hover {
    background-color: #FFFFFFC0;
    color: #000000;
  }

  .modern-button:active {
    background-color: #FFFFFF90;
    color: #000000;
  }

.modern-button-content {
  display: flex;
  gap: 12px;
  align-items: center;
}

.modern-button-icon {
  width: 16px;
  height: 16px;
  margin-top: 1.5px
}

.modern-outline-button {
  border-radius: 8px;
  border: 2px solid #FFFFFF;
  padding: 14px 20px 15px 20px;
  font-size: 16px;
  color: #FFFFFF;
  fill: #FFFFFF;
  transition: background-color 0.1s ease, color 0.1s ease, fill 0.1s ease;
  text-decoration: none;
  display: flex;
  cursor: pointer;
  box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, .132), 0 .3px .9px 0 rgba(0, 0, 0, .108);
}

  .modern-outline-button:hover {
    background-color: #FFFFFF0F;
    color: #FFFFFF;
    fill: #FFFFFF;
  }

  .modern-outline-button:active {
    background-color: #FFFFFF08;
    color: #FFFFFF;
    fill: #FFFFFF;
  }

.modern-outline-button-content {
  display: flex;
  gap: 12px;
  align-items: center;
}

.modern-outline-button-icon {
  width: 12px;
  height: 12px;
  margin-top: 1.5px
}