%iastate22-button,
.iastate22-button {
  display: block;
  border: rem(2) solid $iastate-maroon;
  border-radius: rem(30);
  padding: rem(8) rem(35) rem(8) rem(20);
  appearance: none;
  margin: rem(10) 0;
  text-align: left;
  cursor: pointer;
  background-color: transparent;
  color: $iastate-maroon;
  font-family: $typeface-sans-serif;
  font-weight: 700;
  font-size: rem(18);
  line-height: (25 / 18);
  text-decoration: none;
  transition: 0.2s color ease-in-out, 0.2s background-color ease-in-out, 0.2s padding ease-in-out;
  position: relative;
  @include media-breakpoint-up(md) {
    display: inline-block;
  }

  &:has(.icon-video) {
    padding-right: rem(20);
    display: inline-flex;
  }

  &:has(.icon) {
    display: inline-flex;
    padding-right: rem(40);
  }

  .arrow {
    right: rem(17);
    top: rem(20);
    width: 0;
    background-color: $iastate-gold;

    &:after,
    &:before {
      background-color: $iastate-gold;
    }
  }

  .icon {
    position: absolute;
    padding-left: rem(10);
    right: rem(16);
    bottom: rem(8);
  }

  .icon-video {
    padding-left: rem(40);
    position: relative;
    svg,
    svg path {
      fill: $iastate-maroon;
    }

    svg {
      position: absolute;
      left: rem(10);
      top: rem(4);
      transition: opacity 0.3s ease-out;

      &.icon-video--inactive {
        opacity: 1;
      }

      &.icon-video--active {
        opacity: 0;

        path {
          fill: $white;
        }
      }
    }
  }

  &:hover,
  &:focus-visible {
    background-color: $iastate-maroon;
    color: $white;
    padding-right: rem(40);
    .arrow {
      width: rem(12);
    }

    svg.icon-video--inactive {
      opacity: 0;
    }

    svg.icon-video--active {
      opacity: 1;
    }
  }

  &:has(.icon-video) {
    &:hover,
    &:focus-visible {
      padding-right: rem(20);
    }
  }
}

%iastate22-button--reverse,
.iastate22-button--reverse {
  border-color: $white;
  background-color: $white;
  .arrow {
    background-color: $iastate-maroon;
    &:after,
    &:before {
      background-color: $iastate-maroon;
    }
  }

  .icon-video {
    svg.icon-video--active {
      path {
        fill: $iastate-maroon;
      }
    }
  }
  &:hover,
  &:focus-visible {
    background-color: $white;
    color: $iastate-maroon;
  }
}

%iastate22-button--clear,
.iastate22-button--clear {
  border: none;
  background: transparent;

  .icon-video {
    svg.icon-video--active {
      path {
        fill: $iastate-maroon;
      }
    }
  }

  &:hover,
  &:focus-visible {
    border: none;
    background: transparent;
    color: $iastate-maroon;
  }
}

%iastate22-button--clear-reverse,
.iastate22-button--clear-reverse {
  border: none;
  background: transparent;
  color: $white;

  .icon-video {
    svg {
      path {
        fill: $white;
      }
    }
  }

  &:hover,
  &:focus-visible {
    border: none;
    background: transparent;
  }
}