// ----------------------------------------------------- //
// NEW CLASSES
/*

  .align-middle.col // needs .d-flex on row to be effective (will stretch height)
  .aria-structure   // used on ul to make items more accessable not really ul
  .bg-color
  .bg-white
  .bg-white-box
  .border-right
  .border-right-lg
  .border-right-md
  .border-right-sm
  .border-bottom
  .border-bottom-lg
  .border-bottom-md
  .border-bottom-sm
  .border-bottom-xs
  .btn-white 
  .d-flex
  .d-flex-wrap
  //.hwk-icon-menu.col
  //.hwk-teaser-image-info (presse teaser => smaller image height)
  .no-margin-x
  .no-margin-y
  .no-padding-x
  .no-padding-y
  .no-wrap                      // @since 2.0.1
  //.space-around
  .stretch
  //.submenu-full-width
  //.teaser-box
  //.teaser-icon
  //.teaser-image-info
  //.top-blog
  //.top-blog-image

  // white nav box inside margin
  .nav-white-box      // on .nav-tabs.nav-stacked
  .scrollspy        // outside .nav-tabs.nav-stacked

  // see listgroup.less
  // .listgroup-wrapper
  //    .listgroup-intro
  //    .listgroup-content /.list-group
  //    .listgroup-footer
  //
  // .listgroup-arrow
  // .listgroup-arrow-right
  // .listgroup-content
  // .listgroup-footer
  // .listgroup-image-blog
  // .listgroup-info
  // .list-group-item (?)
  // .listgroup-wrapper
  // .list-icon-check
  // .listgroup-color
*/

// ----------------------------------------------------- //

//
// BUTTONS
// -----------------------------
.btn-white {
  background-color: #fff;
  color: @color-colored;
  border-color: #fff;
  &:active,
  &:focus,
  &:hover {
    color: @color-colored;
    border-color: @color-colored;
  }
}

//
// BORDERS
// -----------------------------
.border-right {
  border-right: 1px solid @hr-border;
  @media (max-width: @screen-xs-max) {
    border-right: none;
    border-bottom: 1px solid @hr-border;
  }
}

@media (min-width: @screen-lg-min) {
  .border-right-lg {
    border-right: 1px solid @hr-border;
  }
}

@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  .border-right-md {
    border-right: 1px solid @hr-border;
  }
}

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  .border-right-sm {
    border-right: 1px solid @hr-border;
  }
}

.border-bottom {
  border-bottom: 1px solid @hr-border;
}

@media (min-width: @screen-lg-min) {
  .border-bottom-lg {
    border-bottom: 1px solid @hr-border;
  }
}

@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  .border-bottom-md {
    border-bottom: 1px solid @hr-border;
  }
}

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  .border-bottom-sm {
    border-bottom: 1px solid @hr-border;

    &.teaser-tile {
      padding-bottom: 20px;
    }
  }
}

@media (max-width: @screen-xs-max) {
  .border-bottom-xs {
    border-bottom: 1px solid @hr-border;

    &.teaser-tile {
      padding-bottom: 10px;
    }
  }
}

//
// COLORS
// -----------------------------
.bg-white-box, .top-blog-box {
  .white-box();

  &.row {
    margin-left: -@listgroup-padding-x;
    margin-right: -@listgroup-padding-x;
    // see screen xl
    @media (min-width: @screen-xl-min) {
      margin-left: -@listgroup-padding-x-xl;
      margin-right: -@listgroup-padding-x-xl;
    }
    @media (max-width: @screen-xs-max) {
      // have it run over the edge so no shadow left/right
      //margin-left: -@listgroup-padding-x-xs;
      //margin-right: -@listgroup-padding-x-xs;
      // margin will be -18px so add 3px as padding to be 15px again
      padding-left: @listgroup-padding-x - @grid-gutter-width-half-xs;
      padding-right: @listgroup-padding-x - @grid-gutter-width-half-xs;
    }
  }
}

.bg-white {
  background-color: #fff !important;
}

.bg-color {
  background-color: @body-bg;
}

.light {
  color: @color-text-light;
}

//
// DISPLAY
// -----------------------------
.d-flex {
  display: flex !important;
}
.d-flex-wrap {
  flex-wrap: wrap !important;
}
.d-block {
  display: block !important;
}
.d-inline-block {
  display: inline-block !important;
}

@media (min-width: @screen-lg-min) {
  .d-flex-lg {
    display: flex !important;
  }
  .d-flex-wrap-lg {
    flex-wrap: wrap !important;
  }
  .d-block-lg {
    display: block !important;
  }
  .d-inline-block-lg {
    display: inline-block !important;
  }
}

@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  .d-flex-md {
    display: flex !important;
  }
  .d-flex-wrap-md {
    flex-wrap: wrap !important;
  }
  .d-block-md {
    display: block !important;
  }
  .d-inline-block-md {
    display: inline-block !important;
  }
}

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  .d-flex-sm {
    display: flex !important;
  }
  .d-flex-wrap-sm {
    flex-wrap: wrap !important;
  }
  .d-block-sm {
    display: block !important;
  }
  .d-inline-block-sm {
    display: inline-block !important;
  }
}

@media (max-width: @screen-xs-max) {
  .d-flex-xs {
    display: flex !important;
  }
  .d-flex-wrap-xs {
    flex-wrap: wrap !important;
  }
  .d-block-xs {
    display: block !important;
  }
  .d-inline-block-xs {
    display: inline-block !important;
  }
}

// @todo documentation
// to prepare row for stretching content height:
// 1) .d-flex.d-flex-wrap
// 2) .stretch
// but it needs segments which has height: 100%
.row.d-flex.d-flex-wrap,
.row.stretch {
  display: flex;
  flex-wrap: wrap;
  // safari bug fix (will wrap early)
  &::before, &::after {
    width: 0;
  }
}
@media (min-width: @screen-lg-min) {
  .row.d-flex-lg.d-flex-wrap-lg,
  .row.stretch-lg {
    display: flex;
    flex-wrap: wrap;
    // safari bug fix (will wrap early)
    &::before, &::after {
      width: 0;
    }
  }
}
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  .row.d-flex-md.d-flex-wrap-md,
  .row.stretch-md {
    display: flex;
    flex-wrap: wrap;
    // safari bug fix (will wrap early)
    &::before, &::after {
      width: 0;
    }
  }
}
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  .row.d-flex-sm.d-flex-wrap-sm,
  .row.stretch-sm {
    display: flex;
    flex-wrap: wrap;
    // safari bug fix (will wrap early)
    &::before, &::after {
      width: 0;
    }
  }
}
@media (max-width: @screen-xs-max) {
  .row.d-flex-xs.d-flex-wrap-xs,
  .row.stretch-xs {
    display: flex;
    flex-wrap: wrap;
    // safari bug fix (will wrap early)
    &::before, &::after {
      width: 0;
    }
  }
}

// on col vertical align middle
// needs row to be d-flex so that column will stretch in height
.col.align-middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

//
// PADDING | MARGIN
// -----------------------------
.no-padding-x {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.no-padding-y {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.no-margin-x {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.no-margin-y {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

@media (max-width: @screen-xs-max) {
  .margin-top-l, .margin-top-m {
    margin-top: 30px !important;
  }

  .padding-top-l, .padding-top-m {
    padding-top: 30px !important;
  }

  .margin-bottom-l, .margin-bottom-m {
    margin-bottom: 30px !important;
  }

  .padding-bottom-l, .padding-bottom-m {
    padding-bottom: 30px !important;
  }
}

// @since 2.0.1
.no-wrap {
  white-space: nowrap;
}

//
// SCROLLSPY | NAV MARGIN
// -----------------------------
#myScrollspy, .scrollspy, .nav-white-box {
  z-index: 999;
  .nav-tabs {
    margin-top: 40px;
    border: none;
    .white-box();
    & > li {
      &.static {
        color: #000;
        font-weight: @font-weight-bold;
        padding: 8px 20px;
      }
      & > a {
        //color: @color-colored;
        padding: 13px 20px;
        border: none;
        border-top: 1px solid @color-background;
        margin-right: 0;
      }
      &.active a,
      a:hover,
      a:active,
      a:focus {
        background-color: @color-background;
        color: @color-text-dark;
      }
    }
    &.affix {
      top: 120px;
    }
    &.affix-bottom {
      position: absolute;
    }
  }

  .nav-stacked > li + li {
    margin-top: 0;
  }

  &.col-md-2 {
    .nav-tabs {
      // 2 due to border 1px left/right
      @media (min-width: @screen-xl-min) {
        width: (@container-xl * .1666666667) - @grid-gutter-width-half-xl * 2 - 2;
      }
      @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
        width: (@container-lg * .1666666667) - @grid-gutter-width-half * 2 - 2;
      }
      @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
        width: (@container-md * .1666666667) - @grid-gutter-width-half * 2 - 2;
      }
    }
  }

  &.col-md-3 {
    .nav-tabs {
      // 2 due to border 1px left/right
      @media (min-width: @screen-xl-min) {
        width: (@container-xl * .25) - @grid-gutter-width-half-xl * 2 - 2;
      }
      @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
        width: (@container-lg * .25) - @grid-gutter-width-half * 2 - 2;
      }
      @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
        width: (@container-md * .25) - @grid-gutter-width-half * 2 - 2;
      }
    }
  }
}


//
// OTHER
// -----------------------------
ul.aria-structure {
  list-style: none;
  padding: 0;
  margin: 0;
}

.test {
  border: 1px solid #f0f;
}