//
// ALERTS
// -----------------
.alert {
  margin-bottom: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 16px;
}

//
// BUTTON
// -----------------
.btn-default {
  &:hover {
    border-color: @hwk-blue-light;
    color: @hwk-blue-light;
    background-color: #fff;
  }
}
// @since 2.0.4
.content .btn {
  margin-bottom: 15px;
  .glyphicon {
    top: 0.2em;
    margin: 0 .4em 0 0;
    color: #fff;
    width: auto;
    font-size: 1em;
  }
  &.btn-primary {
    color: @btn-primary-color;
    background-color: @btn-primary-bg;
  }
  &.btn-success {
    color: @btn-success-color;
    background-color: @btn-success-bg;
  }
  &.btn-info {
    color: @btn-info-color;
    background-color: @btn-info-bg;
  }
  &.btn-warning {
    color: @btn-warning-color;
    background-color: @btn-warning-bg;
  }
  &.btn-danger {
    color: @btn-danger-color;
    background-color: @btn-danger-bg;
  }
  &.btn-default {
    color: @btn-default-color;
    background-color: @btn-default-bg;
    &:active,
    &:focus,
    &:hover {
      border-color: @btn-default-border;
    }
    .glyphicon {
      color: @btn-default-color;
    }
  }
  &.btn-link {
    padding-left: 12px;
  }
}
button.btn-link {
  &:active,
  &:focus,
  &:hover {
    border-bottom: 1px dotted #444;
    color: #444;
  }
}

//
// CAROUSEL
// -----------------
.carousel {
  .carousel-control {
    opacity: .3;
    display: flex;
    align-items: center;
    background-image: none;
    &.right {
      justify-content: flex-end;
      &:hover, &:focus {
        background-image: linear-gradient(to left,rgba(@gray-dark, .2) 0,rgba(@gray-dark, 0) 100%);
      }
    }
    &.left {
      &:hover, &:focus {
        background-image: linear-gradient(to right,rgba(@gray-dark, .2) 0,rgba(@gray-dark, 0) 100%);
      }
    }
    &:hover, &:focus {
      opacity: 1;
    }
    .glyphicon {
      top: 0;
      color: white;
    }
  }
  .carousel-indicators {
    margin-bottom: 0;
  }

  &.carousel-fade {
    .carousel-inner {
      .item {
        opacity: 0;
        transition-property: opacity;
      }
      .active {
        opacity: 1;
        &.left,
        &.right {
          left: 0;
          opacity: 0;
          z-index: 1;
        }
      }

      .next.left,
      .prev.right {
        opacity: 1;
      }
    }
    .carousel-control {
      z-index: 2;
    }
  }
}

//
// HR LINES
// -----------------
#content {

  &:focus {
    outline: none;
  }

  hr {
    border-top: 2px solid @hwk-blue-light-25;
  }

  .bg-white-box {
    hr {
      border-top: 1px solid @hwk-blue-light-25;
    }
  }

  .content {
    hr {
      &.margin-top-s {
        margin-top: 25px !important;
      }

      &.margin-bottom-s {
        margin-bottom: 25px !important;
      }
    }
  }
}

//
// IFRAME
// -----------------
iframe {
  border: none;
}


//
// IMAGES
// -----------------
img {
  &.img-responsive {
    width: 100%;
  }
  & + * {
    margin-top: 15px;
  }
  & + h4,
  & + h5,
  & + h6,
  & + p {
    margin-top: 10px;
  }
  & + .note {
    margin-top: 5px;
  }
}

//
// MEDIA
// -----------------
.video {
  margin-bottom: 10px;
}

//
// PAGINATION
// -----------------
.content .pagination {
  margin: 0;
  .glyphicon {
    font-size: @font-size-small;
    line-height: @line-height-base;
    top: 2px;
  }
  li {
    // @since 2.0.7 => used and changed @pagination-xx variables instead
    //a {
    //  border: none;
    //  &:focus,
    //  &:hover {
    //    background-color: @hwk-blue-light;
    //    color: white;
    //  }
    //}

    // @since 2.0.7
    .glyphicon {
      color: @hwk-blue-dark;
    }
    &.disabled .glyphicon {
      color: @pagination-disabled-color;
    }

    &:first-child,
    &:last-child {
      a {
        padding-left: 20px;
        padding-right: 20px;
        background-color: transparent !important; // @since 2.0.7

        // @since 2.0.7 => used and changed @pagination-xx variables instead
        //&:active,
        //&:focus,
        //&:hover {
        //  &, span, .glyphicon {
        //    color: #fff;
        //  }
        //}
      }
    }
    // @since 2.0.7 => used and changed @pagination-xx variables instead
    //&.active {
    //  a {
    //    color: white;
    //  }
    //}
    //&.disabled {
    //  &:first-child,
    //  &:last-child {
    //    &:active,
    //    &:focus,
    //    &:hover {
    //      &, span, .glyphicon {
    //        color: @hwk-blue-light-50;
    //      }
    //    }
    //  }
    //  a {
    //    &,
    //    &:focus,
    //    &:hover {
    //      color: @gray;
    //      background-color: #fff;
    //      .glyphicon {
    //        color: @hwk-blue-light-50;
    //      }
    //    }
    //  }
    //}
  }
  
  @media (max-width: @screen-xs-max) {
    width: 100%;
    display: flex;
    li {
      flex: 1;
      a {
        text-align: center;
        width: 100%;
      }
    }
  }
}