/// @group px-table-view

///Variables
/// @group TableView
@import "variables";
@import "px-mobile-design/sass/_mixins.scss";

///------------------------------------------------------
/// @access public
/// @group TableView
@mixin pxFonts() {
  font-family: $font-family-default;
  font-weight: $font-weight;
  @content;
}

///------------------------------------------------------
/// Make a table row item clickable.
/// @access public
@mixin tableRowClickable($bg:$table-row-active-background-color, $font:$table-row-active-font-color) {
  cursor: pointer;
  &:active {
    color     : $font;
    background: $bg;
  }
  &:hover {

  }
  @content;
}
///------------------------------------------------------
///Style an action button
/// @access public
/// @group TableView
@mixin actionButton($color, $active, $hover) {
  user-select     : none;
  background-color: $color;
  border          : none;
  outline         : none;

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

  &:active {
    background-color: $active;
  }
  @content;
}
///------------------------------------------------------
/// Mixin to make list turn into columns on larger screen.
/// Similar to App Store
/// On iPad there are grid list
/// On iPhone there grid column
/// @access public
/// @group TableView
@mixin n-columns($min-width, $gutter, $last-equal: false, $max-cols: 6) {
  display    : flex;
  flex-wrap  : wrap;
  flex-direction: row;
  margin-left: -$gutter;
  margin-top : -$gutter;

  > *,
  ::content > * {
    flex       : 1 0 $min-width;
    margin-left: $gutter;
    margin-top : $gutter;
    @if $last-equal {
       @for $i from 2 through $max-cols{
        $screen-width: ($min-width*$i)+($gutter*$i);
        $column-width: (100%/$i);
        @media (min-width: $screen-width) {
          max-width: calc(#{$column-width} - #{$gutter});
        }
      }
      $column-width: (100%/$max-cols);
      @media (min-width: $min-width*$max-cols) {
        min-width: calc(#{$column-width} - #{$gutter});
      }
    }
  }
}

///------------------------------------------------------
/// Clearfix solution
/// @group TableView
@mixin clearfix() {
  &:after,
  &:before {
    display: table;
    content: ' ';
  }

  &:after {
    clear: both;
  }
  @content;
}
///------------------------------------------------------
/// Scrollable solution
/// @group TableView
@mixin scrollable() {
  //  overflow-y                : scroll;
  overflow-y                : auto;
  -webkit-overflow-scrolling: touch;
  @content;
}

///------------------------------------------------------
/// @access public
@mixin shadowEl($elName) {
  #{$elName}::shadow {
    @content;
  }
}