.button--primary {
  white-space: nowrap;
  background-color: transparent;
  padding: 8px 28px 9px;
  border-radius: 30px;
  border: 1px solid var(--color-black);
  color: var(--color-black);
  cursor: pointer;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-feature-settings: 'salt' on;
  font-family: 'Morrison', Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 300;
  line-height: 150%; /* 18px */
  letter-spacing: -0.144px;
  text-transform: uppercase;
}

.button__text {
  display: inline-block;
  font-size: 14px;
  letter-spacing: -.0105rem;
  line-height: 1.5;
  text-align: center;
  transition: all .4s cubic-bezier(.455, .03, .515, .955);
  vertical-align: bottom;
}

.button__icon {
  display: inline-block;
  opacity: 0;
  position: relative;
  transform: translateX(-25px);
  transition: transform .5s cubic-bezier(.65, 0, .1, 1), opacity .2s cubic-bezier(.65, 0, .1, 1);
  width: 0;
}

.button__icon svg {
  width: 18px;
  min-width: 18px;
  transform: translateY(4px);
}

.button--primary:hover .button__text {
  transform: translateX(-11px);
}

.button--primary:hover .button__icon {
  opacity: 1;
  transform: translateX(-8px);
  transition: transform .5s cubic-bezier(.65, 0, .1, 1), opacity .2s cubic-bezier(.65, 0, .1, 1) 0.2s;
}

.button--secondary {
  position: relative;
  cursor: pointer;
  white-space: nowrap;
  /* text-decoration: underline; */
  background-color: transparent;
  border: 0px solid transparent;
  color: var(--color-black);
  padding: 0;
  cursor: pointer;
}

.button--secondary:after {
  transform-origin: right;
  content: '';
  position: absolute;
  top: calc(100% + 0px);
  left: 0;
  right: 0;
  background-color: var(--color-black);
  height: 1px;
}

.button--secondary:hover:after {
  animation: underlineHover 1s cubic-bezier(.65, 0, .1, 1);
}

a {
  color: var(--color-black);
}

@media only screen and (min-width: 600px) {
  .button--primary {
    font-family: 'Morrison', Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%; /* 21px */
    letter-spacing: -0.168px;
    text-transform: uppercase;
  }
}

@keyframes underlineHover {
  0% {
    transform: scaleX(1);
    transform-origin: right;
  }
  50% {
    transform: scaleX(0);
    transform-origin: right;

  }
  51% {
    transform-origin: left;
    transform: scaleX(0);
  }
  to {
    transform-origin: left;
    transform: scaleX(1);
  }
}