$sectionHeaderMarginLeft: 24px;

.section-header {
  // IE10 flexbox hack
  span {
    display: inline-block;
  }

  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  margin: 0;
  height: 115px;
  padding-top: 53px;
  padding-bottom: 27px;
  background-color: #ffffff;

  &-is-light {
    background: white;
  }

  &-has-tabs {
    height: auto;
    min-height: 130px;
    padding-bottom: 0;
  }

  &-has-breadcrumbs {
    padding-top: 30px;
  }

  &-title {
    margin: 0;
    padding-top: 0;
    flex: 2;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    // for IE fix, auto-prefixer doesn't handle this attr
    -ms-flex-preferred-size: auto;

    margin: 0;
    font-size: inherit;

    &-icon {
      margin-top: 8px;
      margin-right: 10px;
    }

    &-text {
      font-size: 24px;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &-actions {
      margin-left: 48px;

      &-dropdown {
        vertical-align: top;
        line-height: 28px;
        margin-right: 12px;
        display: inline-block;
      }
    }
    &-controls{
      margin-left: auto;
    }
  }

  &-has-warnings {
    padding-top: 0;
    height: auto;
  }

  &-weighted-row {
    display: flex;
    align-items: flex-end;

    &-group {
      flex: 1;
      margin-bottom: 0;
    }

    &-group-label {
      font-size: 11px;
      font-weight: bold;
      text-transform: uppercase;
      color: $gray5;
    }

    &-group-value {
      font-size: 24px;
    }

    &-group-value-icon {
      font-size: 14px;
    }
  }

  &-tabs {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    list-style: none;
    padding: 20px 0 0 0;
    margin: 0;
    border-bottom: 3px solid $gray7;
  }

  &-subsection {
    &-tabs {
      padding: 0;
    }
  }

  &-tab {
    display: inline-block;
    color: $gray4;
    font-weight: bold;
    font-size: 15px;
    line-height: 1;
    margin-bottom: -3px;

    &:hover {
      color: $gray1;
    }

    &-alert {
      line-height: 15px;
      width: 15px;
      border-radius: 8px;
      display: inline-block;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      background-color: red;
      color: $pw;
    }

    &-link {
      color: inherit;
      cursor: pointer;
      display: block;
      text-decoration: inherit;
      padding: 8px 24px 8px $sectionHeaderMarginLeft;

      &-is-disabled {
        pointer-events: none;
      }

      &:hover, &:focus {
        color: inherit;
        text-decoration: inherit;
      }
    }

    &-is-active {
      background-color: white;
      border-bottom: 3px solid $green7;
      color: $gray1;
    }

    &-is-disabled {
      cursor: not-allowed;
      color: $gray5;

      &:hover {
        background-color: $gray8;
      }
    }
  }
}