button,
input[type="button"],
input[type="submit"],
.button {
  /* Reset defaults */
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin: 0;
  /* maybe remove this margin */
  margin-bottom: 1em;
  padding: 0;
  border: 2px solid transparent;
  background-color: transparent;
  text-decoration: none;
  font-family: var(--bold-font);
  font-size: 16px;
  line-height: 24px;
  width: 100%;

  /* General Styles  */
  padding: 12px 20px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  transition: all 300ms ease-in-out;
}

button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
.button:hover,
.button:focus {
  cursor: pointer;
  text-decoration: none;
}

main button,
main input[type="button"],
main input[type="submit"],
main .button,
.top-nav-menu .top-explore .button {
  /* Default button */
  position: relative;
  padding: 12px 60px 12px 20px;
  background: linear-gradient(
    to right,
    var(--dark-purple) 50%,
    var(--bright-yellow) 50%
  );
  background-position: 98%;
  background-size: 300%;
  color: var(--dark-purple);
}

main .button.button-default {
  border: 2px solid transparent !important;
  background: linear-gradient(
    to right,
    var(--dark-purple) 50%,
    var(--bright-yellow) 50%
  ) !important;
  background-position: 98% !important;
  background-size: 300% !important;
  color: var(--dark-purple) !important;
}

main input[type="button"],
main input[type="submit"],
main button.no-arrow,
input[type="submit"].orderbutton.formbutton,
input[type="submit"].button.cm_button_continue_shopping,
.top-nav-menu .top-explore .button {
  padding: 12px 20px 12px 20px;
}

.button.button-reverse {
  padding: 12px 20px 12px 60px;
}

.button.long-button {
  width: auto;
}

main .button:disabled,
main button:disabled {
  pointer-events: none !important;
  background: rgb(255, 183, 1, 0.4) !important;
}

main button.button.cm_button_checkout:disabled {
  pointer-events: none !important;
  background: #F7F5F3 !important;
}

main button::after,
main .button::after {
  position: absolute;
  right: 22px;
  display: inline-block;
  content: "";
  width: 20px;
  height: 16px;
  -webkit-mask: url(../../images/icons/arrow.svg) no-repeat 50% 50%;
  mask: url(../../images/icons/arrow.svg) no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: var(--dark-purple);
  transition: all 300ms ease-in-out;
}

main .button.button-default::after {
  background-color: var(--dark-purple) !important;
}

main button.button-download::after,
main .button.button-download::after {
  -webkit-mask: url(../../images/icons/download.svg) no-repeat 50% 50%;
  mask: url(../../images/icons/download.svg) no-repeat 50% 50%;
  height: 20px;
}

main button.cm_button_checkout::after {
  -webkit-mask: url(../../images/icons/padlock.svg) no-repeat 50% 50%;
  mask: url(../../images/icons/padlock.svg) no-repeat 50% 50%;
  height: 29px;
  background-color: var(--black);
}

main .button.button-reverse::after,
main button.no-arrow::after,
.top-nav-menu .top-explore .button::after {
  display: none;
}

main .button.button-reverse::before {
  position: absolute;
  left: 22px;
  display: inline-block;
  content: "";
  transform: rotateY(180deg);
  width: 20px;
  height: 16px;
  -webkit-mask: url(../../images/icons/arrow.svg) no-repeat 50% 50%;
  mask: url(../../images/icons/arrow.svg) no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: var(--dark-purple);
  transition: all 300ms ease-in-out;
}

main button:hover,
main button:focus,
main input[type="button"]:hover,
main input[type="button"]:focus,
main input[type="submit"]:hover,
main input[type="submit"]:focus,
main .button:hover,
main .button:focus,
.top-nav-menu .top-explore .button:hover,
.top-nav-menu .top-explore .button:focus {
  /* Default button */
  background-position: 2%;
  color: var(--white);
}

main button:hover::after,
main .button:hover::after {
  right: 12px;
  background-color: var(--white);
}

main .button.button-default:hover,
main .button.button-default:focus {
  background-position: 2% !important;
  color: var(--white) !important;
}

main .button.button-default:hover::after,
main .button.button-default:focus::after {
  background-color: var(--white) !important;
}

main .button.button-reverse:hover::before {
  left: 12px;
  background-color: var(--white);
}

@media only screen and (min-width: 321px) {
  main button,
  main input[type="button"],
  main input[type="submit"],
  main .button,
  main .button.long-button {
    /* Reset defaults */
    width: max-content;
  }
}

@media only screen and (min-width: 1025px) {
  button,
  input[type="button"],
  input[type="submit"],
  .button {
    /* Reset defaults */
    font-size: 18px;
    line-height: 28px;
  }

  main button::after,
  main .button::after {
    width: 24px;
    height: 19px;
  }
}

/* Colour variants */

main .bg-purple button,
main .bg-purple input[type="button"],
main .bg-purple input[type="submit"],
main .bg-purple .button,
main .bg-purple button {
  border: 2px solid var(--bright-yellow);
  background: linear-gradient(
    to right,
    transparent 50%,
    var(--bright-yellow) 50%
  );
  background-position: 98%;
  background-size: 300%;
  color: var(--dark-purple);
}

main .button.button-dark {
  border: 2px solid var(--bright-yellow) !important;
  background: linear-gradient(
    to right,
    transparent 50%,
    var(--bright-yellow) 50%
  ) !important;
  background-position: 98% !important;
  background-size: 300% !important;
  color: var(--dark-purple) !important;
}

main .bg-purple button:hover,
main .bg-purple button:focus,
main .bg-purple input[type="button"]:hover,
main .bg-purple input[type="button"]:focus,
main .bg-purple input[type="submit"]:hover,
main .bg-purple input[type="submit"]:focus,
main .bg-purple .button:hover,
main .bg-purple .button:focus {
  background-position: 2%;
  color: var(--bright-yellow);
}

main .button.button-dark:hover,
main .button.button-dark:focus {
  background-position: 2% !important;
  color: var(--bright-yellow) !important;
}

main .bg-purple button::after,
main .bg-purple .button::after {
  background-color: var(--dark-purple);
}

main .button.button-dark::after {
  background-color: var(--dark-purple) !important;
}

main .bg-purple button:hover::after,
main .bg-purple .button:hover::after {
  background-color: var(--bright-yellow);
}

main .button.button-dark:hover::after {
  background-color: var(--bright-yellow) !important;
}

main .bg-yellow button,
main .bg-yellow input[type="button"],
main .bg-yellow input[type="submit"],
main .bg-yellow .button,
main .bg-yellow button {
  border: 2px solid var(--dark-purple);
  background: linear-gradient(
    to right,
    transparent 50%,
    var(--dark-purple) 50%
  );
  background-position: 98%;
  background-size: 300%;
  color: var(--white);
}

main .button.button-bright {
  border: 2px solid var(--dark-purple) !important;
  background: linear-gradient(
    to right,
    transparent 50%,
    var(--dark-purple) 50%
  ) !important;
  background-position: 98% !important;
  background-size: 300% !important;
  color: var(--white) !important;
}

main .bg-yellow button:hover,
main .bg-yellow button:focus,
main .bg-yellow input[type="button"]:hover,
main .bg-yellow input[type="button"]:focus,
main .bg-yellow input[type="submit"]:hover,
main .bg-yellow input[type="submit"]:focus,
main .bg-yellow .button:hover,
main .bg-yellow .button:focus {
  background-position: 2%;
  color: var(--dark-purple);
}

main .button.button-bright:hover,
main .button.button-bright:focus {
  background-position: 2% !important;
  color: var(--dark-purple) !important;
}

main .bg-yellow button::after,
main .bg-yellow .button::after {
  background-color: var(--white);
}

main .button.button-bright::after,
main .button.button-bright.button-reverse::before {
  background-color: var(--white) !important;
}

main .bg-yellow button:hover::after,
main .bg-yellow .button:hover::after {
  background-color: var(--dark-purple);
}

main .button.button-bright:hover::after,
main .button.button-bright.button-reverse:hover::before {
  background-color: var(--dark-purple) !important;
}

main .bg-light-gray button,
main .bg-light-gray input[type="button"],
main .bg-light-gray input[type="submit"],
main .bg-light-gray .button,
main .bg-light-gray button,
main input[type="submit"].cm_button_recalculate,
main input[type="submit"].cm_button_continue_shopping,
main input[type="submit"].button.cm_button_cancel,
main #cancel,
main .button.cm_button_recalculate,
main .button.cm_button_continue_shopping {
  border: 2px solid var(--bright-yellow);
  background: linear-gradient(to right, var(--dark-blue) 50%, transparent 50%);
  background-position: 98%;
  background-size: 300%;
  color: var(--dark-purple);
}

main .button.button-neutral {
  border: 2px solid var(--bright-yellow) !important;
  background: linear-gradient(
    to right,
    var(--dark-blue) 50%,
    transparent 50%
  ) !important;
  background-position: 98% !important;
  background-size: 300% !important;
  color: var(--dark-purple) !important;
}

main .bg-light-gray button:hover,
main .bg-light-gray button:focus,
main .bg-light-gray input[type="button"]:hover,
main .bg-light-gray input[type="button"]:focus,
main .bg-light-gray input[type="submit"]:hover,
main .bg-light-gray input[type="submit"]:focus,
main .bg-light-gray .button:hover,
main .bg-light-gray .button:focus,
main input[type="submit"].cm_button_recalculate:hover,
main input[type="submit"].cm_button_recalculate:focus,
main input[type="submit"].cm_button_continue_shopping:hover,
main input[type="submit"].cm_button_continue_shopping:focus,
main input[type="submit"].button.cm_button_cancel:hover,
main input[type="submit"].button.cm_button_cancel:focus,
main #cancel:hover,
main #cancel:focus,
main .button.cm_button_recalculate:hover,
main .button.cm_button_recalculate:focus,
main .button.cm_button_continue_shopping:hover,
main .button.cm_button_continue_shopping:focus,
main .request-a-call-back-button:hover,
main .request-a-call-back-button:focus {
  border: 2px solid var(--dark-blue);
  background-position: 2%;
  color: var(--white);
}

main .button.button-neutral:hover,
main .button.button-neutral:focus {
  border: 2px solid var(--dark-blue) !important;
  background-position: 2% !important;
  color: var(--white) !important;
}

main .bg-light-gray button::after,
main .bg-light-gray .button::after,
main .button.button-neutral::after {
  background-color: var(--dark-purple);
}

main .button.button-neutral::after {
  background-color: var(--dark-purple) !important;
}

main .bg-light-gray button:hover::after,
main .bg-light-gray .button:hover::after {
  background-color: var(--white);
}

main .button.button-neutral:hover::after {
  background-color: var(--white) !important;
}

.top-nav-menu .request-a-call-back-button {
  border: 2px solid var(--bright-yellow);
  background: linear-gradient(to right, var(--dark-blue) 50%, transparent 50%);
  background-position: 98%;
  background-size: 300%;
  color: var(--dark-purple) !important;
  height: fit-content;
  position: relative;
  padding: 12px 60px 12px 20px;
  font-size: 18px;
  line-height: 28px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin: 0;
  text-decoration: none;
  font-family: var(--bold-font);
  -webkit-border-radius: 8px;
  border-radius: 8px;
  transition: all 300ms ease-in-out;
  filter: none;
}

.top-nav-menu .request-a-call-back-button::after {
  position: absolute;
  right: 22px;
  display: inline-block;
  content: "";
  width: 24px;
  height: 19px;
  -webkit-mask: url(../../images/icons/arrow.svg) no-repeat 50% 50%;
  mask: url(../../images/icons/arrow.svg) no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: var(--dark-purple);
  transition: all 300ms ease-in-out;
}

.top-nav-menu .request-a-call-back-button:hover::after {
  right: 12px;
  background-color: var(--white) !important;
  filter: none;
}

.top-nav-menu .request-a-call-back-button:hover,
.top-nav-menu .request-a-call-back-button:focus {
  border: 2px solid var(--dark-blue);
  background-position: 2%;
  color: var(--white) !important;
  text-decoration: none !important;
}

@media screen and (max-width: 990px) {
  .top-nav-menu .top-explore {
    flex-wrap: wrap;
  }

  .top-nav-menu .request-a-call-back-button {
    margin-top: 10px;
    width: 100%;
    padding: 12px 60px 12px 60px;
    font-size: 16px;
    line-height: 24px;
  }

  .top-nav-menu .request-a-call-back-button::after {
    display: none;
  }
  
  .top-nav-menu .request-a-call-back-button {
    display: none;
  }
  
  .top-nav-menu .top-explore .request-a-call-back-button {
    display: flex;
  }

}

/* Button Overrides */

main .button.outline-on-dark {
  border: 2px solid var(--bright-yellow);
  background: linear-gradient(
    to right,
    var(--bright-yellow) 50%,
    transparent 50%
  );
  background-position: 98%;
  background-size: 300%;
  color: var(--white);
}

main .button.outline-on-dark:hover,
main .button.outline-on-dark:focus {
  border: 2px solid var(--bright-yellow);
  background-position: 2%;
  color: var(--dark-purple);
}

main .button.outline-on-dark::after {
  background-color: var(--white);
}

main .button.outline-on-dark:hover::after {
  background-color: var(--dark-purple);
}

main .button.outline-on-bright {
  border: 2px solid var(--dark-purple);
  background: linear-gradient(
    to right,
    var(--dark-purple) 50%,
    transparent 50%
  );
  background-position: 98%;
  background-size: 300%;
  color: var(--dark-purple);
}

main .button.outline-on-bright:hover,
main .button.outline-on-bright:focus {
  border: 2px solid var(--dark-purple);
  background-position: 2%;
  color: var(--white);
}

main .button.outline-on-bright::after {
  background-color: var(--dark-purple);
}

main .button.outline-on-bright:hover::after {
  background-color: var(--white);
}

main .button.purple-on-neutral {
  outline: none;
  background: linear-gradient(
    to right,
    var(--bright-yellow) 50%,
    var(--dark-purple) 50%
  );
  background-position: 98%;
  background-size: 300%;
  color: var(--white);
}

main .button.purple-on-neutral:hover,
main .button.purple-on-neutral:focus {
  outline: none;
  background-position: 2%;
  color: var(--dark-purple);
}

main .button.purple-on-neutral::after {
  background-color: var(--white);
}

main .button.purple-on-neutral:hover::after {
  background-color: var(--dark-purple);
}