//
// LINK ITEM
// (not used old itmes)
// -----------------------
.link-item {
  margin-bottom: 10px;

  .glyphicon {
    top: 1px;
    font-size: 22px;
    width: 30px;
  }
}

//
// NAV WHITE BOX
// -----------------------
.nav-white-box {
  .white-box();
  & > li > a {
    color: @hwk-blue-dark;
    padding: 13px 20px;
    border-top: 1px solid @hwk-blue-light-25;
    margin: 0;
    &:hover,
    &:focus {
      background-color: @hwk-blue-light-25;
    }
  }
  li {
    &.static {
      padding: 8px 20px;
      color: #000;
      font-weight: 700;
    }
    &.active {
      & > a {
        color: @hwk-blue-dark !important;
      }
    }
    & + li {
      margin-top: 0;
    }
  }
}

//
// SECTION TEASER
// -----------------------
.section-teaser {
  margin-left: -@grid-gutter-width-half-xs;
  margin-right: -@grid-gutter-width-half-xs;
  padding: @grid-gutter-width-half-xs 40px @grid-gutter-width-half-xs @grid-gutter-width-half-xs;
  border-top: 1px solid @hwk-blue-light;
  cursor: pointer;
  position: relative;
  & > * {
    margin: 0;
  }
  .glyphicon {
    margin-bottom: 0;
    position: absolute;
    right: @grid-gutter-width-half-xs;
    top: calc(50% - 10px);
  }
}

//
// SWIPE HORIZONZAL
// -----------------------
.swipe-horizontal-wrapper { // new
  position: relative;

  &.has-swipe {
    padding: 0 15px;
  }

  .swipe-horizontal-arrow {
    border-bottom: none;
    &:active,
    &:focus,
    &:hover {
      background-color: transparent;
    }
  }
}

.swipe-horizontal-container {
  overflow: hidden;
  background: @color-background;
}

.swipe-horizontal {
  position: relative;
  white-space: nowrap;

  li {
    float: none;
    display: inline-block;
  }

  &.nav-tabs {
    li {
      a {
        line-height: @line-height-base;
        border-color: transparent !important;

        &:focus,
        &:hover {
          background-color: @nav-tabs-active-link-hover-bg;
          color: @nav-tabs-active-link-hover-color;
        }
      }
    }
  }
}

.swipe-horizontal-arrow {
  cursor: pointer;
  position: relative;

  &, .glyphicon {
    color: @hwk-blue-dark;
    font-size: @font-size-small;
  }
  .glyphicon {
    top: 5px;
    text-align: center;
    width: 25px;
  }

  &.disabled {
    cursor: initial;

    &, .glyphicon {
      color: @hwk-blue-dark-25;
    }
  }

  position: absolute;
  top: 10px;
  width: 25px;
  height: 25px;
  display: block;
}

.swipe-horizontal-left {
  left: -15px;
}

.swipe-horizontal-right {
  right: -15px;
}

@media (max-width: @screen-sm-max) {
  .swipe-horizontal-wrapper {
    .nav > li > a {
      padding: 10px 8px;
    }
    &.has-swipe {
      .swipe-horizontal-arrow {
        height: 100%;
        width: 30px;
        top: 0;
        .glyphicon {
          top: 15px;
        }
      }
    }
  }
}