.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 15px 25px;
  transition: all var(--transitionLinear);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;

  &:hover {
    .btnArrow {
      &.arrowLeft { left: -3px; }
      &.arrowRight { left: 3px; }
    }

    .btnHoverFill { width: 100%; }

    &:has(.btnHoverFill.hoverBlue) {
      .btnText { color: var(--white); }
      .btnArrow path { fill: var(--white); }
    }
  }

  &.white .btnFill { border-color: var(--white); }
  &.blue .btnFill { border-color: var(--holtBlue); }
  &.lightBlue .btnFill { border-color: var(--holtLightBlue); }

  &.solid {
    &.white {
      color: var(--holtBlue);
      .btnFill { background-color: var(--white); }
    }

    &.blue {
      color: var(--white);
      .btnFill { background-color: var(--holtBlue); }
      svg path { fill: var(--white); }
    }

    &.lightBlue {
      color: var(--black);
      .btnFill { background-color: var(--holtLightBlue); }
    }
  }

  &.outlined {
    .btnFill { background-color: transparent; }
    .btnArrow path { fill: currentColor; }

    &.white {
      color: var(--white);
      &:hover { color: var(--black); }
    }

    &.blue {
      color: var(--holtBlue);
      &:hover { color: var(--white); }
    }

    &.lightBlue {
      color: var(--holtLightBlue);
      &:hover { color: var(--holtBlue); }
    }
  }

  .btnText,
  .btnArrow {
    position: relative;
    z-index: var(--arrangeFront);
  }

  .btnText { white-space: nowrap; }

  .btnArrow {
    display: block;
    transition: all var(--transitionExpo);

    &.arrowLeft,
    &.arrowRight {
      left: 0;
    }
  }

  .btnHoverFill,
  .btnFill {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }

  .btnFill {
    width: 100%;
    border: 2px solid transparent;
    z-index: var(--arrangeBack);
  }

  .btnHoverFill {
    width: 0;
    transition: all var(--transitionExpo);
    z-index: var(--arrangeMiddle);

    &.hoverWhite { background-color: var(--white); }
    &.hoverBlue { background-color: var(--holtBlue); }
    &.hoverLightBlue { background-color: var(--holtLightBlue); }
  }
}