@import "../styles.css";

/*========== BUTTONS ==========*/
.button {
    display: inline-block;
    background-color: var(--first-color);
    color: #FFF;
    padding: 1rem;
    border-radius: .5rem;
    font-weight: var(--font-medium);
  }
  
  .button[type="submit"] {
    border: 0;
    background: none;
    box-shadow: none;
    border-radius: 0px;
    background-color: var(--first-color);
    color: #FFF;
    padding: 1rem;
    border-radius: .5rem;
    font-family: var(--body-font);
    font-weight: var(--font-medium);
  }
  
  .buttons-container {
    display: flex; /* This makes the buttons display side by side */
    gap: 20px; /* Adds spacing between the buttons */
  }
  
  .button:hover {
    background-color: var(--first-color-alt);
  }
  
  .button__icon {
    font-size: 1.25rem;
    margin-left: var(--mb-0-5);
    transition: .3s;
  }
  
  .button--white {
    background-color: #FFF;
    color: var(--first-color);
  }
  
  .button--white:hover {
    background-color: #FFF;
  }
  
  .button--flex {
    display: inline-flex;
    align-items: center;
  }
  
  .button--small {
    padding: .75rem 1rem;
  }
  
  .button--link {
    padding: 0;
    background-color: transparent;
    color: var(--first-color);
  }
  
  .button--link:hover {
    background-color: transparent;
    color: var(--first-color-alt);
  }