@import 'variables';
@import 'mixins';

///Objects
$inuit-enable-toggle--small: true;
$inuit-enable-toggle--huge: true;
$inuit-enable-toggle--large: true;

$inuit-enable-inline-fields: true;
$inuit-enable-input--tiny: true;
$inuit-enable-input--small: true;
$inuit-enable-input--regular: true;
$inuit-enable-input--large: true;
$inuit-enable-input--huge: true;
$inuit-enable-input--bare: true;

$inuit-enable-btn--primary: true;
$inuit-enable-btn--tertiary: true;
$inuit-enable-btn--small: true;
$inuit-enable-btn--large: true;
$inuit-enable-btn--huge: true;
$inuit-enable-btn--icon: true;
$inuit-enable-btn--bare: true;
$inuit-enable-btn--disabled: true;
///----------------------------------------------
/// Style distrubed content
@include c('') {
   //@import 'px-buttons-design/_objects.buttons.scss';
}


/// Table Row
/// @group px-table-row
/// @access public
@include block ('table-row') {


  @include clearfix();
  @include noselect();

  box-sizing    : border-box;
  position      : relative;
  overflow      : hidden;
  display       : flex;
  flex-direction: row;
  appearance    : normal;
  flex          : 1;

  > *:not(input),
  > *:not(textarea),
  > *:not(select) {
    -webkit-text-size-adjust   : none;
    -webkit-highlight          : none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  ///---------------------------------------------------------------------------
  ///.table-row--tiny
  @include modifier ('tiny') {
    padding: $table-view-padding--tiny;
  }
  ///---------------------------------------------------------------------------
  ///.table-row--small
  @include modifier ('small') {
    padding: $table-view-padding--small;
  }
  ///---------------------------------------------------------------------------
  ///.table-row--large
  @include modifier ('large') {
    padding: $table-view-padding--large;
  }
  ///---------------------------------------------------------------------------
  ///.table-row--huge
  @include modifier ('huge') {
    padding: $table-view-padding--huge;
  }
  ///---------------------------------------------------------------------------
  ///.table-row--flush
  @include modifier ('flush') {
    line-height: normal;
  }
  ///---------------------------------------------------------------------------
  ///.table-row--col
  @include modifier ('col') {
    flex-direction: column;
  }
  ///---------------------------------------------------------------------------
  ///.table-row--center
  @include modifier ('center') {
    justify-content: center;
    align-items: center;
    align-content: center;
    > *{
      text-align: center;
      align-self: center;
    }
  }

  ///---------------------------------------------------------------------------
  ///.table-row--tappable
  @include modifier ('tappable') {
    @include tableRowClickable($table-row-selected-background-color, $table-row-active-font-color);

    &:active {
      color           : $table-row-selected-color;
      background-color: $table-row-selected-background-color;
      .table-row__body,
      .table-row__label,
      .table-row__subtitle,
      .table-row__title {
        color: $table-row-active-font-color;
      }
    }
  }

  ///.table-row--collapsable
  // TODO: Update to use visually hidden class
  @include modifier ('collapsable') {
    @include tableRowClickable($table-row-active-background-color, $table-row-active-font-color);
    border-bottom: none;

    ~ .table-row__content {
      transition : var(--px-table-row-collapseable-transition, all 0.3s);
      display    : none;
      margin-left: $inuit-base-spacing-unit;
      .table-row {
        border-bottom: none;
      }
    }
    ///---------------------------------------------------------------------------
    @include modifier ('is-opened') {
      ~ .table-row__content {
        display: block;
      }
    }
  }

  ///---------------------------------------------------------------------------
  /// top aligned content
  @include modifier ('top') {
    align-items: flex-start;
  }
  ///---------------------------------------------------------------------------
  /// bottom aligned content
  @include modifier ('bottom') {
    align-items: flex-end;
  }
  ///---------------------------------------------------------------------------
  /// reversed content content
  @include modifier ('bottom') {
    align-items: flex-end;
  }

  ///---------------------------------------------------------------------------
  ///Elements
  ///---------------------------------------------------------------------------

  ///---------------------------------------------------------------------------
  ///.table-row__content
  @include element ('content') {
    @include noselect();
    display       : flex;
    flex-direction: column;
    align-self    : stretch;
    order         : 2;
    flex          : 1;
    user-select   : none;
    ///---------------------------------------------------------------------------
    @include modifier ('row') {
      flex-direction: row;
    }

    ///---------------------------------------------------------------------------
    @include modifier ('column') {
      flex-direction: column;
    }

    ///---------------------------------------------------------------------------
    @include modifier ('flush') {
      line-height: normal;
    }

  }
  ///---------------------------------------------------------------------------
  ///.table-row__title
  @include element ('title') {
    @include noselect();
    order      : 3;
    line-height: normal;
    flex       : 1 0 auto;
    align-items: center;
    align-self : stretch;
    display    : flex;
    white-space: nowrap;
  }
  ///---------------------------------------------------------------------------
  ///.table-row__title
  @include element ('subtitle') {
    order      : 4;
    align-self : stretch;
    white-space: nowrap;
    line-height: normal;
    flex       : 1 0 auto;
  }
  ///---------------------------------------------------------------------------
  ///.table-row__body
  @include element ('body') {
    order      : 5;
    align-self : stretch;
    flex       : 1 0 auto;
    white-space: normal;
    line-height: normal;
  }
  ///---------------------------------------------------------------------------
  ///.table-row__label
  @include element ('label') {
    @include noselect();
    order     : 0;
    align-self: center;
    white-space: nowrap;
    // Move down slightly to align with icons
    position: relative;
    top: 2px;


    @include modifier ('right') {
      text-align   : left;
      order        : 4;
      margin-right: $inuit-base-spacing-unit;
    }

    @include modifier ('left') {
      flex: 0 1 80px;
      text-align: right;
      margin-right: $inuit-base-spacing-unit;
    }
  }


  ///---------------------------------------------------------------------------
  ///.table-row__media
  @include element ('media') {
    flex           : 0 1 auto;
    order          : 1;
    display        : flex;
    align-self     : stretch;
    justify-content: center;
    align-content  : center;
    flex-direction : column;
    margin-left: var(--px-table-row-media-margin, $inuit-base-spacing-unit--small);
    margin-right: var(--px-table-row-media-margin, $inuit-base-spacing-unit--small);
    ///---------------------------------------------------------------------------
    ///.table-row__media--left
    @include modifier ('left') {
      order: 0;
    }
    ///---------------------------------------------------------------------------
    ///.table-row__media--right
    @include modifier ('right') {
      //margin-right: $inuit-base-spacing-unit;
      margin-right: var(--px-table-row-media-margin-right, 0);
      order       : 9;
    }
    ///---------------------------------------------------------------------------
    ///.table-row__media--toggle
    @include modifier ('toggle') {}

    ///---------------------------------------------------------------------------
    ///.table-row__media--image
    @include modifier ('image') {

      img {
        display   : block;
        max-width : 80px;
        max-height: 80px;
      }
    }
  }

  .btn {
    outline   : none;
    min-height: 44px;
    width     : 100%;
  }

}

// Trumps
$inuit-enable-margins : true;
@import 'px-spacing-design/_trumps.spacing.scss';