Links: Default

.c-link {
  border-radius: remify(12px);
  padding: remify(12px) remify(24px);
  border: none;
  display: inline-block;
 
  &.top-spaced {
    margin-top: remify(32px);
  }

  .c-launch & {
    position: absolute;
    bottom: remify(-28px);
    @include centerer-horizontal;
  }

  .c-launch--complex & {
    position: relative;
    bottom: initial;
    left: initial;
    transform: none;
    margin-top: remify(16px);
    align-self: center;

    @include min-screen(bp(tablet)) {
      margin-top: auto;
    }

  }

  .c-deck & {
    margin: remify(24px) auto 0;
    text-align: center;
    display: block;
    padding: remify(12px);
    @include min-screen(bp(phone-p)) {
      max-width: 50%;
    }
  }

  .c-main--fitness-lounge .c-deck & {
    @include min-screen(bp(phone-p)) {
      max-width: 100%;
    }
  }

  .c-pill & {
    margin: remify(24px) auto 0;
    text-align: center;
    display: block;
  
    @include min-screen(bp(tablet)) {
      max-width: initial;
      margin-top: remify(32px);
      display: inline-block;
    }
  }

  .c-icon {
    vertical-align: middle;
  }

}

/*------------------------------------*\
  Primary modifier
\*------------------------------------*/

.c-link--primary {
  display: inline-block;
  background-color: primary(night, 100);
  text-decoration: underline;
  color: #fff;
  position: relative;
  transition: .3s;

  &:hover {
    background-color: darken( primary(sky, 120), 3% );
    // @include shadow('high', primary(sky, 100) );
  }

  svg {
    // position: absolute;
    // right: remify(8px);
    // top: 50%;
    // transform: translateY(-50%);
    vertical-align: bottom;

    * {
      fill: #fff;
    }

  }

  .c-addon__action &.c-link--addon span {
    font-size: 100%;
  }

  .c-airport-map__list & {
    @include min-screen(bp(tablet-p)) {
      display: none;
    }
  }

}


/*------------------------------------*\
  sky modifier
\*------------------------------------*/

.c-link--sky {
  display: inline-block;
  background-color: primary(sky, 100);
  text-decoration: underline;
  color: #fff;
  position: relative;
  transition: .3s;

  &:hover {
    background-color: darken( primary(sky, 120), 3% );
  }

  svg {
    vertical-align: bottom;

    * {
      fill: #fff;
    }

  }

}

/*------------------------------------*\
  Icon modifier
\*------------------------------------*/

.c-link--icon {
  display: inline-block;
  background-color: primary(sky, 120);
  text-decoration: underline;
  color: #fff;
  position: relative;
  width: remify(56px);
  height: remify(56px);
  border-radius: 50%;
  padding: 0;
  transition: .3s;

  &:hover {
    @include shadow('high', primary(sky, 100) );

    .c-hero--wave & {
      box-shadow: none;
    }

  }

  svg {
    position: absolute;
    right: remify(8px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    * {
      fill: #fff;
    }

    .c-hero--wave & {
      z-index: 1;
      animation: bouncing-arrow 2s linear infinite;
      animation-delay: 1.5s;
    }

  }

  .c-hero--wave & {
    background-color: primary(sky, 120);
    transform: rotate(90deg);

    &:before,
    &:after {
      content: "";
      position: absolute;
      background-color: primary(sky, 120);
      border-radius: 50%;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      transform: scale(0.5);
      transform-origin: center center;
      animation: pulse-me 2s linear infinite;
    }
    &:after {
      animation-delay: 1.5s;
    }

  }

}

/*------------------------------------*\
  Graphic modifier
\*------------------------------------*/

.c-link--graphic {
  text-transform: initial;
  display: flex;
  background: transparent;
  align-items: center;
  padding: remify(8px);
  border: remify(1px) solid primary(night, 80);
  color: #fff;
  padding: remify(4px) remify(8px);
  text-decoration: none;

  span {
    display: none;

    @include min-screen(bp(tablet)) {
      display: inline-block;
    }
  }

  img {
    width: remify(32px);
    height: remify(32px);

    @include min-screen(bp(tablet)) {
      margin-right: remify(16px);
    }

  }

  svg * {
    fill: currentColor;
  }

}

/*------------------------------------*\
  Raw modifier
\*------------------------------------*/

.c-link--raw {
   
  .c-main--flights-destination & {
    grid-column: main;
    text-align: center; 

    @include min-screen (bp(tablet-p)) {
      display: none;
    }
  }

  .c-main--flights-landing &,
  .c-main--flight-companies & {
    text-align: center;
    display: block; 
    margin-top: remify(16px);

    @include min-screen (bp(tablet-p)) {
      display: none;
    }
  
  }

  .c-main--flight-companies & {
    margin-bottom: remify(24px);
  }

}

/*------------------------------------*\
  Submit modifier
\*------------------------------------*/

.c-link--submit {
  background-color: primary(sun, 100);
  color: aviation(imbarchi);
  text-align: center;
  &:hover {
    @include shadow('high', primary(sun, 100) );
  }
  &:active{
    background-color: darken( primary(sun, 100) , 3% );
  }
}


/*------------------------------------*\
  Inverse modifier
\*------------------------------------*/

.c-link--inverse {
  background-color: transparent;
  color: primary(night, 100);
  border: 1px solid primary(night, 100);
  text-align: center;
  &:hover {
    background-color: primary(night, 100);
    color: #fff;
  }
}

/*------------------------------------*\
  Primary disabled modifier
\*------------------------------------*/

.c-link--primary-disabled {
  background-color: rgba(179, 187, 198, .2);
  color: rgba(aviation(imbarchi), .8);  
  display: inline-block;
  text-decoration: none;  
  position: relative;
  transition: .3s;
  pointer-events: none;
  
  svg {
    position: absolute;
    right: remify(8px);
    top: 50%;
    transform: translateY(-50%);

    * {
      fill: rgba(aviation(imbarchi), .8);
    }

  }

}

@include keyframes(pulse-me) {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  70% {
    opacity: 0.49;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@include keyframes(bouncing-arrow) {
  0%, 20%, 50%, 80%, 100% {
    transform: translate(-50%, -50%)
  } 
  40% {
    transform: translate(-40%, -50%)
  }
  60% {
    transform: translate(-40%, -50%)
  }

}

/*------------------------------------*\
  Text icon modifier
\*------------------------------------*/

.c-link--text-icon {
  text-transform: initial;
  display: inline-flex;
  align-items: center;
  color: #fff;
  padding: remify(6px) remify(12px);
  text-decoration: none;
  background-color: primary(sky, 120);
  border-radius: remify(6px);

  span {
    @include font-scale(level-1, bold);
    display: inline-block;
    margin-right: remify(16px);
  }

  svg * {
    fill: currentColor;
  }

}

/*------------------------------------*
  Text icon modifier
*------------------------------------*/
.c-link--text-icon.show-text {
  
  span {
    display: inline-block;
    margin-right: remify(16px);
  }

}

/*------------------------------------*\
  Spaceless modifier
\*------------------------------------*/
.c-link--spaceless {
  padding: 0;
}