// Lightning Design System 2.8.0
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

/**
 * Vertical page header record home contains up to seven compact layout fields. They're contained in the `.slds-page-header__detail-row` div.
 * The heading does not truncate. This is typically used in more compact layouts where more vertical space is desired.
 *
 * @summary Initializes vertical page header
 *
 * @variant
 * @name record-home-vertical
 * @selector .slds-page-header_vertical
 * @restrict .slds-page-header
 * @support dev-ready
 */

.slds-page-header_vertical,
.slds-page-header--vertical {
  padding: $spacing-small;
  background: $color-background-page-header;
  border-bottom: 0;

  .slds-page-header__controls {
    padding-top: $spacing-x-small;
    margin-top: $spacing-x-small;
    border-top: $border-width-thin solid $color-border;
  }

  .slds-page-header__name-title {
    margin-top: $spacing-xx-small;
  }
}

/**
 * @summary Vertical list of detail items
 * @selector .slds-page-header__detail-list
 * @restrict .slds-page-header_vertical ul
 */
.slds-page-header__detail-list {
  display: flex;
  flex-wrap: wrap;
}

/**
 * @summary List items of vertical detail list
 * @selector .slds-page-header__detail-item
 * @restrict .slds-page-header__detail-list li
 */
.slds-page-header__detail-item {
  margin-top: $var-spacing-small;
  width: 50%;
}