button.btn-primary[data-component-id="amphibios:button"],a.btn-primary[data-component-id="amphibios:button"] {
  font-family: OpenSans-Bold, sans-serif;
  color: var(--amphibios-dark-blue) !important;
  background-color: var(--amphibios-yellow);
  box-shadow: 1px 2px 0 0 var(--amphibios-blue);
  border-radius: 4px;
  padding: 8px 12px;
  border: none;
  font-size: var(--amphibios-standard-text-font-size);
  line-height: var(--amphibios-standard-text-line-height);
  &::after {
    content: "";
    width: 13px;
    height: 13px;
    background-image: url(./images/btn-link.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right center;
    display: inline-block;
    margin-left: 8px;
  }
  &:hover {
    box-shadow: 2px 4px 0 0 var(--amphibios-blue);
    color: var(--amphibios-dark-blue) !important;
    background-color: var(--amphibios-yellow);
  }
}
button.btn-dark[data-component-id="amphibios:button"],a.btn-dark[data-component-id="amphibios:button"] {
  font-family: OpenSans-Bold, sans-serif;
  color: var(--amphibios-white) !important;
  background-color: var(--amphibios-dark-blue);
  box-shadow: 1px 2px 0 0 var(--amphibios-yellow);
  border-radius: 4px;
  padding: 8px 12px;
  border: none;
  font-size: var(--amphibios-standard-text-font-size);
  line-height: var(--amphibios-standard-text-line-height);
  &::after {
    content: "";
    width: 13px;
    height: 13px;
    background-image: url(./images/btn-link-white.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right center;
    display: inline-block;
    margin-left: 8px;
  }
  &:hover {
    box-shadow: 2px 4px 0 0 var(--amphibios-yellow);
    color: var(--amphibios-white) !important;
    background-color: var(--amphibios-dark-blue);
  }
}

button.btn-secondary[data-component-id="amphibios:button"],a.btn-secondary[data-component-id="amphibios:button"] {
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 0;
  padding-right: 0;
  font-family: OpenSans-Bold, sans-serif;
  font-weight: 700;
  display: inline-block;
  color: var(--amphibios-blue) !important;
  text-decoration: none;
  background-color: transparent;
  border: none;
  border-radius: 0;
  font-size: var(--amphibios-standard-text-font-size);
  line-height: var(--amphibios-standard-text-line-height);
  &::before {
    content: " ";
    background-image: url(./images/pointer_right.svg);
    display: inline-block;
    width: 50px;
    height: 40px;
    position: relative;
    left: -1%;
    bottom: -15px;
  }
  &::after {
    content: " ";
    background-image: url(./images/pointer_left.svg);
    display: inline-block;
    width: 50px;
    height: 40px;
    position: relative;
    right: -1%;
    bottom: -15px;
  }
  &:hover {
    box-shadow: 0 2px 0 0 var(--amphibios-blue);
    color: var(--amphibios-blue) !important;
    background-color: transparent;
  }
}

button.btn-pink[data-component-id="amphibios:button"],a.btn-pink[data-component-id="amphibios:button"] {
  font-family: OpenSans-Bold, sans-serif;
  color: var(--amphibios-dark-blue) !important;
  background-color: var(--amphibios-pink);
  box-shadow: 1px 2px 0 0 var(--amphibios-blue);
  border-radius: 4px;
  padding: 8px 12px;
  border: none;
  font-size: var(--amphibios-standard-text-font-size);
  line-height: var(--amphibios-standard-text-line-height);
  &::after {
    content: "";
    width: 13px;
    height: 13px;
    background-image: url(../../images/btn-link.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right center;
    display: inline-block;
    margin-left: 8px;
  }
  &:hover {
    box-shadow: 2px 4px 0 0 var(--amphibios-blue);
    background-color: var(--amphibios-pink);
    color: var(--amphibios-dark-blue) !important;
  }
}