// ---------------------------------------------------------------------
//  Links
// ---------------------------------------------------------------------

@mixin btn {
  font-family: $sans-serif;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 14px;
  font-weight: 500;
  padding: 15px 12px 13px;
  min-width: 240px;

  overflow: hidden;
  background: transparent;
  border-radius: 0;
  border: 2px solid $brand;
  background: $brand;

  color: $black;
  -webkit-transition: background $trans, border-color $trans, color $trans;
  transition: background $trans, border-color $trans, color $trans;


  @include stop-at($small) {
    width: 100%;
  }

  @include start-at($xlarge) {
    font-size: 16px;
    padding: 13px 32px 15px;
  }

  span {
    transform: translate3d(0,0,0);
    z-index: 2;
    white-space: nowrap;
  }

  svg {
    position: relative;
    z-index: 2;
    fill: currentColor;
  }

  @include stop-at($small) {
    &.btn--full--sm {
      width: 100%;
    }
  }

  &.is-active {
    &:before {
      opacity: 0;
    }
  }

  svg + span,
  span + svg,
  img + span,
  span + img {
    margin-left: 8px;
  }

  svg {
    fill: currentColor;
    transform: translate3d(0, 2px, 0);
    transition: transform $trans;

    * {
      fill: currentColor;
    }
  }

  img, svg {
    -webkit-transition: transform $trans;
    transition: transform $trans;
  }

  &:hover {
    cursor: pointer;
    background: transparent;
    color: $brand;

    span + svg {
      transform: translate3d(3px, 2px, 0);
    }

    &:before,
    &:after {
      transform: scaleY(2.4);
    }
  }

  &[disabled] {
    opacity: 0.6;
    &:hover {
      background: $brand;
      color: $black;
      cursor: default;
    }
  }

}

@mixin btn-alt {
  font-family: $sans-serif;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 14px;
  font-weight: 500;
  padding: 14px 12px;
  min-width: 240px;

  overflow: hidden;
  border-radius: 0;
  border: 2px solid $brand;
  border-left: none;
  border-right: none;
  background: transparent;

  color: $brand;
  transition: background $trans, border-color $trans, color $trans;

  @include start-at($xlarge) {
    font-size: 16px;
    padding: 13px 32px 15px;
  }

  div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  div:before,
  div:after,
  &:before,
  &:after {
    content: '';
    width: 2px;
    height: 30%;
    position: absolute;
    background: $brand;
    left: 0;
    top: 0;
    transition: height $trans;
    z-index: -1;
  }

  div:before,
  div:after {
    left: auto;
    right: 0;
  }
  &:after,
  div:after {
    top: auto;
    bottom: 0;
  }

  svg {
    position: relative;
    z-index: 2;
    fill: currentColor;
    transition: transform $trans;

    * {
      fill: currentColor;
      transition: transform $trans;
    }
  }

  svg + span,
  span + svg,
  img + span,
  span + img {
    margin-left: 8px;
  }

  img, svg {
    -webkit-transition: transform $trans;
    transition: transform $trans;
  }

  &:hover {
    cursor: pointer;

    span + svg {
      transform: translate3d(3px, 0, 0);
    }

    &:before,
    &:after,
    div:before,
    div:after {
      height: 50%;
    }
  }

}
.btn {
  @include btn;

  &.disabled {
    cursor: default !important;
    opacity: 0.4 !important;
  }
}

.btn-alt {
  @include btn-alt;
}


.btn--scroll {
  background: transparent;
  color: $brand;

  svg {
    display: block;
    transform-origin: center;
    transform: translate3d(0, 0, 0) rotate(90deg);
  }

  &:hover {
    svg {
      transform: translate3d(0, 3px, 0) rotate(90deg) !important;
    }
  }
}

.btn--static {

  &:hover {
    span + svg {
      transform: translate3d(0, 2px, 0);
    }
  }

}

.btn--sm {
  padding: 2px 16px;
  height: 40px;
  min-width: 120px;
  font-size: 12px;

  @include start-at($xlarge) {
    font-size: 13px;
  }
}

.btn--wide {
  width: 100%;
  max-width: 330px;
}

@include stop-at($small){
  .btn--full-sm {
    width: 100%;
    margin: 0 !important;

    + .btn--full-sm {
      margin: 18px 0 0 !important;
    }
  }
}

.btn--grow {
  min-width: 120px;
  width: 100%;
}


.btn--spin {
  img, svg {
    width: 12px;
    height: 12px;
  }

  &:hover {
    color: #fff !important;

    svg, img {
      transform: rotate(180deg);
    }
  }
}

.bg-white {

  .btn:hover {
    color: $black;
  }
}

.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
  font-weight: 500;
  transition: opacity $trans;

  @include start-at($large) {
    font-size: 16px;
  }

  &.icon-link--lower {
    text-transform: none;
    letter-spacing: 0;
    text-decoration: underline;
    font-size: 16px;
  }

  svg + span,
  span + svg {
    margin-left: 6px;
    transform: translate3d(0, 2px, 0);
  }

  svg {
    fill: currentColor;
    transition: transform $trans;
    position: relative;
  }

  &:hover {
    cursor: pointer;
    opacity: 0.6;

    span + svg {
      transform: translate3d(4px, 2px, 0);
    }
  }
}


a:hover {
  .icon-link {
    span + svg {
      transform: translate3d(4px, 2px, 0);
    }
  }
}

a:hover .icon-link.icon-link--static,
.icon-link--static:hover {
  span + svg {
    transform: translate3d(0, 2px, 0);
  }
}

.btn--white {

  &:hover {
    color: $white;
  }
}



// ----------------------------------------
// Arrow link
// ----------------------------------------

.arrow-link {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: 500;
  font-size: 16px;
  color: currentColor;

  svg {
    display: block;
    margin-left: 8px;
    width: 18px;
    min-width: 18px;
    transition: transform $trans;
  }

  svg * {
    fill: currentColor;
  }

  &:hover {

    svg {
      transform: translate3d(4px, 0, 0);
    }

  }
}

.text-brand {
  color: $brand !important;
}



// ----------------------------------------
// Arrow link
// ----------------------------------------

.link {
  display: inline-flex;
  align-items: center;
  position: relative;
  color: var(--color-text-link);
  overflow: hidden;
  text-decoration: underline;
}


p a {
  text-decoration: underline;
  transition: opacity $trans;
  color: #1F44D2;

  &:hover {
    opacity: 0.6;
    text-decoration: underline;
  }
}

.bg-static, .bg-black {
  p a {
    color: $brand;
  }
}

.icon-link {
  display: inline-flex;
  align-items: center;
  position: relative;

  svg + span,
  span + svg {
    margin-left: 8px;
  }

  svg {
    fill: currentColor;
  }
}


.icon-link--underline {
  transition: opacity $trans;

  span {
    text-decoration: underline;
  }

  svg + span,
  span + svg {
    margin-left: 4px;
  }

  &:hover {
    opacity: 0.6;
  }
}


// ----------------------------------------
// Fancy arrow
// ----------------------------------------

.fancy-arrow {
  .arrow {
    transform: scaleX(0);
    transform-origin: center;
    transition: transform $trans;
  }
}

a:hover .fancy-arrow {
  .arrow {
    transform: scaleX(1);
    transition: transform $trans;
  }
}
