/**
 * @file
 * Visual styles for buttons.
 */

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  background: none;
}

.button,
.image-button {
  margin-right: 1em;
  margin-left: 1em;
}

.button:first-child,
.image-button:first-child {
  margin-right: 0;
  margin-left: 0;
}

.button {
  padding: 0.75em 3.5em;
  font-size: var(--theme--font-size--small);
  font-weight: 600;
  display: inline-block;
  border-radius: 999px;
  border: 2px solid transparent;
}
  .button.button--style--primary,
  .button.form-submit {
    background: var(--theme--color--secondary);
    color: rgba(255,255,255, 1);
    position: relative;
  }
    .button.button--style--primary:hover,
    .button.button--style--primary:focus,
    .button.button--style--primary:active,
    .button.form-submit:hover,
    .button.form-submit:focus,
    .button.form-submit:active {
      background: var(--theme--color--hover);
    }
    .button.button--style--primary::after,
    .button.form-submit::after {
        content: '\f178';
        font-family: "Font Awesome 5 Pro";
        font-weight: 400;
        font-size: var(--theme--font-size--normal);
        position: absolute;
        top: 50%;
        right: 0;
        z-index: 1;
        transform: translate(-1.25em, -50%);
        transition: transform 0.3s ease;
    }
      .button.button--style--primary:hover::after,
      .button.form-submit:hover::after {
        transform: translate(-0.75em, -50%);
      }
  .button.button--style--secondary {
    background: var(--theme--color--primary);
    color: rgba(255,255,255, 1);
  }
    .button.button--style--secondary:hover,
    .button.button--style--secondary:focus,
    .button.button--style--secondary:active {
      background: var(--theme--color--dark);
    }
  .button[class*="outline"] {
    background: none;
    padding: 0.75em 1.75em;
  }
    .button.button--style--primary--outline {
      background: rgba(255,255,255, 1);
      border-color: var(--theme--color--secondary);
      color: var(--theme--color--secondary);
    }
    .button.button--style--primary--outline:hover,
    .button.button--style--primary--outline:focus,
    .button.button--style--primary--outline:active {
      border-color: var(--theme--color--hover);
      color: var(--theme--color--hover);
    }
    .button.button--style--secondary--outline {
      background: rgba(255,255,255, 1);
      border-color: var(--theme--color--primary);
      color: var(--theme--color--primary);
    }
    .button.button--style--secondary--outline:hover,
    .button.button--style--secondary--outline:focus,
    .button.button--style--secondary--outline:active {
      border-color: var(--theme--color--dark);
      color: var(--theme--color--dark);
    }
  .button.button--style--read-more {
    position: relative;
    padding: 0.75em 0.75em 0.75em 1.5em;
    color: var(--theme--color--dark);
  }
    .button.button--style--read-more::before {
      content: '\f178';
	    font-family: "Font Awesome 5 Pro";
	    font-weight: 400;
	    font-size: var(--theme--font-size--small);
      position: absolute;
      top: 50%;
      left: 0;
      z-index: 1;
      color: var(--theme--color--secondary);
      transform: translate(0, -50%);
      transition: transform 0.3s ease;
    }
      .button.button--style--read-more:hover::before {
        transform: translate(0.4em, -50%);
      }
      
.buttons > .button {
  margin: 0 0.5em 0.75em 0;
}