//
// Heading
// --------------------------------------------------


// Basic style

.heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: relative;

  > .title {
    display: block;
    padding: @padding-base-vertical @padding-base-horizontal;
    flex: 1;
  }

  > .nav {align-self: flex-start;}

  > .avatar {margin-left: (5*@rem);}

  > .headline {
    font-size: @font-size-title;
    padding: @padding-base-vertical @padding-base-horizontal;
    width: 100%;

    &.indent {margin-left: (40*@rem)}
  }
}


// Sizes

.heading-lg {
  > .nav {margin: (4*@rem);}

  > .title {
    font-size: @font-size-title;
    padding: (@padding-base-vertical + (3*@rem)) @padding-base-horizontal;
  }
}


// Affix heading

.heading.affix {
  background-color: @color-back;
  
  &:extend(.heading-lg all);
}

.with-heading-top    {padding-top: (48*@rem);}
.with-heading-bottom {padding-bottom: (48*@rem);}