/// layout-attributes.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-

// Import from sources for extends
// -------------------------------
@import "../../angular-material/src/core/services/layout/layout-attributes";

$sogo-breakpoints: 'xs' 'gt-xs' 'sm' 'gt-sm' 'md' 'gt-md';

@mixin layouts_for_breakpoint($name:null) {
  @if $name == null or index($sogo-breakpoints, $name) != null {
    @debug "layouts_for_breakpoint: #{$name}";
    @include flex-order-for-name($name); // ~44KB
    @include offset-for-name($name); // ~11KB
    @include layout-align-for-name($name);

    @include flex-properties-for-name($name); // ~400KB
    @include layout-for-name($name);
  }
}

@mixin flex-properties-for-name($name: null) {
  $flexName: 'flex';
  @if $name != null {
    $flexName: 'flex-#{$name}';
    $name : '-#{$name}';
  } @else {
    $name : '';
  }

  [#{$flexName}]             { flex: 1;         box-sizing: border-box; }  // === flex: 1 1 0%;

  [#{$flexName}-grow]        { flex: 1 1 100%;  box-sizing: border-box; }
  [#{$flexName}-initial]     { flex: 0 1 auto;  box-sizing: border-box; }
  [#{$flexName}-auto]        { flex: 1 1 auto;  box-sizing: border-box; }
  [#{$flexName}-none]        { flex: 0 0 auto;  box-sizing: border-box; }

  // (1-10) * 10 = 0-100%
  @for $i from 0 through 10 {
    $value : #{$i * 10 + '%'};

    [#{$flexName}="#{$i * 10}"] {
      flex: 1 1 #{$value};
      max-width: #{$value};
      max-height: 100%;
      box-sizing: border-box;
    }

    [layout="row"] > [#{$flexName}="#{$i * 10}"] {
      flex: 1 1 #{$value};
      max-width: #{$value};
      max-height: 100%;
      box-sizing: border-box;
    }

    [layout="column"] > [#{$flexName}="#{$i * 10}"] {
      flex: 1 1 #{$value};
      max-width: 100%;
      max-height: #{$value};
      box-sizing: border-box;
    }

    @if $name != '' {
      [layout#{$name}="row"] > [#{$flexName}="#{$i * 10}"] {
        flex: 1 1 #{$value};
        max-width: #{$value};
        max-height: 100%;
        box-sizing: border-box;
      }

      [layout#{$name}="column"] > [#{$flexName}="#{$i * 10}"] {
        flex: 1 1 #{$value};
        max-width: 100%;
        max-height: #{$value};
        box-sizing: border-box;
      }
    }
  }

  [layout="row"] {
    > [#{$flexName}="33"]   , > [#{$flexName}="33"]     {  flex: 1 1 33.33%;  max-width: 33.33%;  max-height: 100%; box-sizing: border-box; }
    > [#{$flexName}="66"]   , > [#{$flexName}="66"]     {  flex: 1 1 66.66%;  max-width: 66.66%;  max-height: 100%; box-sizing: border-box; }
  }

  [layout="column"] {
    > [#{$flexName}="33"]   , > [#{$flexName}="33"]     {  flex: 1 1 33.33%;  max-width: 100%;  max-height: 33.33%; box-sizing: border-box; }
    > [#{$flexName}="66"]   , > [#{$flexName}="66"]     {  flex: 1 1 66.66%;  max-width: 100%;  max-height: 66.66%; box-sizing: border-box; }
  }

  @if $name != '' {
    [layout#{$name}="row"] {
      > [#{$flexName}="33"]   , > [#{$flexName}="33"]     {  flex: 1 1 33.33%;  max-width: 33.33%;  max-height: 100%; box-sizing: border-box; }
      > [#{$flexName}="66"]   , > [#{$flexName}="66"]     {  flex: 1 1 66.66%;  max-width: 66.66%;  max-height: 100%; box-sizing: border-box; }
    }

    [layout#{$name}="column"] {
      > [#{$flexName}="33"]   , > [#{$flexName}="33"]     {  flex: 1 1 33.33%;  max-width: 100%;  max-height: 33.33%; box-sizing: border-box; }
      > [#{$flexName}="66"]   , > [#{$flexName}="66"]     {  flex: 1 1 66.66%;  max-width: 100%;  max-height: 66.66%; box-sizing: border-box; }
    }
  }
}