@import '../../../../bootstrap/less/jumbotron';

//
// Jumbotron
// --------------------------------------------------

.jumbotron {
  margin-bottom: 0;
  .link-variant(@jumbotron-bg, @jumbotron-link-color, @jumbotron-link-hover-color);

  .text-muted {
    .opacify(color, @jumbotron-bg, @jumbotron-muted);
    color: @jumbotron-muted;
  }

  .container-fluid &,
  .container & {
    margin-bottom: @jumbotron-padding;
  }

  &.border-radius-0 {
    border-radius: 0;
  }

  &.jumbotron-cover {
    .bg-cover;
  }

  &.jumbotron-overlay {

    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: @jumbotron-overlay-bg;
    }

    &,
    > * {
      position: relative;
    }
  }

  &.jumbotron-flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.jumbotron.jumbotron-with-form {
  padding-bottom: 0;

  label {
    font-weight: normal;
  }

  form {
    margin-bottom: 0;
  }

  .jumbotron-form-container {
    padding-top: @padding-base-vertical + 5px; // Balance with label height
    padding-bottom: @padding-base-vertical;
    background: @jumbotron-form-bg;
    color: @jumbotron-form-color;

    // Override default grid gutter widths for 'tighter' columns
    .row {
      margin-left: -@padding-xs-horizontal;
      margin-right: -@padding-xs-horizontal;
    }
    // Columns
    .form-group {
      padding: 0 @padding-xs-horizontal;
    }

    // Align submit with other fields
    .form-group .btn[type="submit"] {
      margin-top: @line-height-computed + 5px; // Label height
    }
  }

  .nav-tabs,
  form {
    margin: 0 auto;
    max-width: 400px; // Prevent over-stretching forms on < @screen-sm
  }
  
  .nav-tabs {
    position: relative;
    z-index: 1;
    margin-top: @jumbotron-padding;
    border-bottom-width: 0;
    > li {
      margin-bottom: 0;
      & when (iscolor(@jumbotron-nav-link-bg))
      and (iscolor(@jumbotron-nav-link-color))
      and (iscolor(@jumbotron-nav-link-hover-color))
      and not (@jumbotron-nav-link-color = @jumbotron-link-color) {
        .link-variant(@jumbotron-nav-link-bg, @jumbotron-nav-link-color, @jumbotron-nav-link-hover-color);
      }
      > a {
        & when (iscolor(@jumbotron-nav-link-bg)) {
          background-color: @jumbotron-nav-link-bg;
        }
        & when (iscolor(@jumbotron-nav-link-hover-bg)) {
          &:hover,
          &:focus {
            background-color: @jumbotron-nav-link-hover-bg;
          }
        }
      }
      &:last-child > a {
        margin-right: 0;
      }
      &.active {
        & when (iscolor(@jumbotron-nav-link-bg))
        and (iscolor(@jumbotron-nav-active-link-color)) {
          .link-variant(@jumbotron-nav-active-link-bg, @jumbotron-nav-active-link-color, @jumbotron-nav-active-link-color);
        }
        & when (iscolor(@jumbotron-nav-active-link-bg)) {
          > a {
            &,
            &:focus,
            &:hover {
              background-color: @jumbotron-nav-active-link-bg;
            }
          }
        }
      }
    }
  }

  @media screen and (min-width: @screen-sm-min) {
    .nav-tabs,
    form {
      max-width: none;
    }
    .nav-tabs {
      margin-top: (@jumbotron-padding * 1.6);
    }
  }
}

.container .jumbotron.full-width {
  position: relative;
  width: 100vw;
  left: calc(-50vw + 50%);
}