/*!
 * name: @jswork/wsui-layout-trbla
 * description: Simply flexable trbla layout for wsui.
 * homepage: https://github.com/afeiship/wsui-layout-trbla
 * version: 1.0.8
 * date: 2023-06-08 15:23:08
 * license: MIT
 */

/*wsui-layout-trbla Start*/
$wsui-layout-trbla-options: (
  name: 'wsui-layout-trbla'
) !default;

// left -> auto -> right
// 'la',
// 'lar',
// 'ar',
// 'lr',

// top -> auto -> bottom
// 'ta',
// 'tab',
// 'ab',
// 'tb'
$name: map-get($wsui-layout-trbla-options, name);
.#{ $name } {
  display: flex;
  box-sizing: border-box;
  $layout-align-items: (
    stretch,
    center,
    flex-start,
    flex-end,
    space-between,
    space-around,
    baseline,
    initial,
    inherit
  );

  @each $value in $layout-align-items {
    &[data-align='#{$value}'] {
      align-items: $value;
    }
  }

  // flex-wrap:
  &[data-wrap='true'] {
    flex-wrap: wrap;
  }

  &[data-wrap='false'] {
    flex-wrap: nowrap;
  }

  &[data-value='center'] {
    align-items: center;
    justify-content: center;
  }

  &[data-value='la'],
  &[data-value='lar'],
  &[data-value='ar'],
  &[data-value='lr'] {
    width: 100%;
    flex-direction: row;
  }

  &[data-value='ta'],
  &[data-value='tab'],
  &[data-value='ab'],
  &[data-value='tb'] {
    height: 100%;
    flex-direction: column;
  }

  &[data-value='la'],
  &[data-value='lar'],
  &[data-value='ta'],
  &[data-value='tab'] {
    & > * {
      &:nth-child(2) {
        flex: 1;
      }
    }
  }

  &[data-value='ar'],
  &[data-value='ab'] {
    & > * {
      &:nth-child(1) {
        flex: 1;
      }
    }
  }

  &[data-value='lr'],
  &[data-value='tb'] {
    justify-content: space-between;
  }
}
/*wsui-layout-trbla End*/