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

@import '../mixins/index';

/**
 * Responsive tables
 *
 * When a table exceeds the width of its container, one responsive option is to wrap the table in a `.slds-scrollable_x` class so that the user can scroll horizontally. View the example small and medium form factor tabs to see the effect.
 *
 * When `.slds-max-medium-table_stacked` is applied to the &ldquo;Grid&rdquo; table, we generate faux `<th>` labels using the `data-label` applied to each cell, and stack the cells instead of lining them up horizontally. This works up until the **medium form factor** breakpoint. After the breakpoint is triggered, the table will lay out horizontally as normal.
 *
 * When `.slds-max-medium-table_stacked` is applied to the &ldquo;Grid&rdquo; table, we generate faux `<th>` labels using the `data-label` applied to each cell, and stack the cells instead of lining them up horizontally. This works up until the **medium form factor** breakpoint. After the breakpoint is triggered, the table will lay out horizontally as normal.
 *
 * @summary Creates stacked row with stacked cells
 *
 * @name responsive
 * @selector .slds-max-medium-table_stacked
 * @restrict .slds-table
 * @support prototype
 * @variant
 * @layout responsive
 */
.slds-max-medium-table_stacked,
.slds-max-medium-table--stacked {
  @include table-stacked;

  @include mq-medium-max {

    td:before,
    th:before {
      padding-bottom: $spacing-xx-small;
    }
  }
}

/**
 * @summary Creates stacked rows with horizontal cells
 *
 * @selector .slds-max-medium-table_stacked-horizontal
 * @restrict .slds-table
 * @support prototype
 * @modifier
 * @layout responsive
 */
.slds-max-medium-table_stacked-horizontal,
.slds-max-medium-table--stacked-horizontal {
  @include table-stacked;

  @include mq-medium-max {

    td {
      text-align: right;

      &:before {
        float: left;
        margin-top: $spacing-xxx-small;
      }
    }

    // Revert max-width: $size-small;
    .slds-truncate {
      max-width: 100%;
    }
  }
}