//
// Atajos
// --------------------------------------------------

.atajo{
  margin-bottom: $line-height-computed;
  background-color: $atajo-bg;
  border: 1px solid transparent;
  border-radius: $atajo-border-radius;
  text-align: center;

  @include box-shadow(0 1px 1px rgba(0,0,0,.05));

  // link
  a{
    text-decoration: none;
    color: inherit;
    display: block;
    padding: $atajo-padding;
    min-height: 150px;
    &:hover{
      text-decoration: none;
      color: inherit;
    }
  }

  // icon
  .atajo-icon{
    font-size: 1.7em;
    .fa{
      padding-top: 3px;
      height: $atajo-icon-height;
      @if $color-test{
        background-color: yellow;
      }
    }
    @if $color-test{
      background-color: orange;
    }
  }

  // vector
  .atajo-vector{
    img{
      height: $atajo-vector-height;
      padding-bottom: 2px;
      text-align: center;
      margin: auto;
    }
    @if $color-test{
      background-color: red;
    }
  }


  // image
  .atajo-image{
    img{
      height: $atajo-image-height;
    }
    @if $color-test{
      background-color: lightblue;
    }
  }

  // vector
  .atajo-logo{
    img{
      height: $atajo-logo-height;
      width: 100%;
    }
    @if $color-test{
      background-color: gray;
    }
  }

  // description
  .atajo-text{
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-size: 1.1em;
    @if $color-test{
      background-color: red;
    }

    .atajo-title{
      text-transform: uppercase;
      letter-spacing: -0.02em;
      padding: 5px 0 3px 0;
      line-height: 1.1em;
      @if $color-test{
        background-color: green;
      }
    }
    .atajo-description{
      text-transform: uppercase;
      font-size: 0.85em;
      padding: 5px 0;
      line-height: 1.1em;
      @if $color-test{
        background-color: yellow;
      }
    }

    // text variants
    .light{
      font-weight: 300;
    }
    .bold{
      font-weight: 700;
    }
    .sm{
      font-size: 0.85rem !important;
    }
    .xs{
      font-size: 0.7rem;
    }
  }

  // size
  &.atajo-sm a{
    padding: $atajo-padding-sm;
    font-size: 0.8em ;
  }
  &.atajo-lg a{
    padding: $atajo-padding-lg;
    font-size: 1.2em ;
  }
}

// Contextual variations
.atajo-brand {
  @include atajos-variant($atajo-brand-border, $atajo-brand-text, $atajo-brand-bg, $atajo-brand-border);
}
.atajo-default {
  @include atajos-variant($atajo-default-border, $atajo-default-text, $atajo-default-bg, $atajo-default-border);
}
.atajo-primary {
  @include atajos-variant($atajo-primary-border, $atajo-primary-text, $atajo-primary-bg, $atajo-primary-border);
}
.atajo-success {
  @include atajos-variant($atajo-success-border, $atajo-success-text, $atajo-success-bg, $atajo-success-border);
}
.atajo-info {
  @include atajos-variant($atajo-info-border, $atajo-info-text, $atajo-info-bg, $atajo-info-border);
}
.atajo-warning {
  @include atajos-variant($atajo-warning-border, $atajo-warning-text, $atajo-warning-bg, $atajo-warning-border);
}
.atajo-danger {
  @include atajos-variant($atajo-danger-border, $atajo-danger-text, $atajo-danger-bg, $atajo-danger-border);
}