//
// 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 {
    a {
      border: none;
      &:focus,
      &:hover {
        background-color: @hwk-blue-light;
        color: white;
      }
    }
    &:first-child,
    &:last-child {
      a {
        padding-left: 20px;
        padding-right: 20px;
        background-color: @hwk-blue-light-25 !important;

        &:active,
        &:focus,
        &:hover {
          &, span, .glyphicon {
            color: #fff;
          }
        }
      }
    }
    &.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%;
      }
    }
  }
}