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

//
// BUTTON
// -----------------
.btn-default {
  &:hover {
    border-color: @color-colored;
    color: @color-colored;
    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 @hr-border;
  }

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

  .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
// -----------------
.pagination {
  margin: 0;
  .glyphicon {
    color: @color-text-dark;
    font-size: @font-size-small;
    line-height: @line-height-base;
    top: 2px;
  }

  li {
    // @since 2.0.7
    &.disabled .glyphicon {
      color: @pagination-disabled-color;
    }
    // @since 2.0.7 => used and changed @pagination-xx variables instead
    //a {
    //  border: none;
    //  &:focus,
    //  &:hover {
    //    background-color: @pagination-hover-bg;
    //    color: white;
    //  }
    //}
    &: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
  //&.disabled {
  //  &:first-child,
  //  &:last-child {
  //    &:active,
  //    &:focus,
  //    &:hover {
  //      &, span, .glyphicon {
  //        color: @gray;
  //      }
  //    }
  //  }
  //  a {
  //    &,
  //    &:focus,
  //    &:hover {
  //      color: @gray;
  //      .glyphicon {
  //        color: @gray;
  //      }
  //    }
  //  }
  //}
  
  @media (max-width: @screen-xs-max) {
    width: 100%;
    display: flex;
    li {
      flex: 1;
      a {
        text-align: center;
        width: 100%;
      }
    }
  }
}