@import '../../style_config/config.scss';

// stylelint-disable declaration-block-no-duplicate-properties
.flex-grid-grow {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  // 수정자 마진0
  &--margin0 {
    & > .flex-grid__col {
      margin: 0;
    }
  }

  & > * {
  
    flex: 1;
    margin-left: $flex-grid--column-margin;
    max-width: 100%; //for slider....

    &.col--grow-1 {
      flex-grow: 1;
    }
    
    &.col--grow-2 {
      flex-grow: 2;
    }
  
    &.col--grow-3 {
      flex-grow: 3;
    }
  
    &.col--grow-4 {
      flex-grow: 4;
    }
  
    &.col--grow-5 {
      flex-grow: 5;
    }
  
    &.col--grow-6 {
      flex-grow: 6;
    }
  
    &.col--grow-7 {
      flex-grow: 7;
    }
  
    &.col--grow-8 {
      flex-grow: 8;
    }
  
    &.col--grow-9 {
      flex-grow: 9;
    }
  
    &.col--grow-10 {
      flex-grow: 10;
    }
  
    &.col--grow-11 {
      flex-grow: 11;
    }
  
    &.col--grow-12 {
      flex-grow: 12;
    }
    
    // fixed-width column (default = 200px)
    &.flex-grid__col--fixed-width {
      flex: 0 0 $flex-grid__column--fixed-width;
    }
    
    
    &:first-child {
      margin-left: 0rem;
    }
  
    &:last-child {
      margin-right: 0rem;
    }
  }
}

// todo: 이부분 mixin으로 하자 
// 특정 시점에 Grow 풀기
@include response ($phablet) {
  .flex-grid--md {
    display: block;
  }

  .flex-grid--md>* {
    padding-left: 0;
    padding-right: 0;

    &.flex-grid__col {
      margin-left: 0;
    }
  }
}

@include response ($mobile) {
  .flex-grid--sm {
    display: block;
  }

  .flex-grid--sm>* {
    padding-left: 0;
    padding-right: 0;

    &.flex-grid__col {
      margin-left: 0;
    }
  }
}

@include response ($desktophd) {
  .flex-grid--wlg {
    display: block;
  }

  .flex-grid--wlg>* {
    padding-left: 0;
    padding-right: 0;

    &.flex-grid__col {
      margin-left: 0;
    }
  }
}

@include response ($tablet) {
  .flex-grid--wmd {
    display: block;
  }

  .flex-grid--wmd>* {
    padding-left: 0;
    padding-right: 0;

    &.flex-grid__col {
      margin-left: 0;
    }
  }
}

@include response ($desktop) {
  .flex-grid--lg {
    display: block;
  }

  .flex-grid--lg>* {
    padding-left: 0;
    padding-right: 0;

    &.flex-grid__col {
      margin-left: 0;
    }
  }
}


// 그리드 비대 정리 시스템
// 마진은 space-between 에 의하여 빈 자리로 사용된다.

.flex-grid {

  flex-wrap: wrap;
  display: flex;
  justify-content: space-between;

  &--around {
    justify-content: space-around;
  }

  &--end {
    align-items: flex-end;
  }

  &--start {
    justify-content: flex-start;
  }

  &--vertical {
    flex-direction: column;
    height: 100%;
    .flex-grid {
      margin:0;
    }

    & > div:last-child {
      .JDcard {
        margin-bottom: 0;
      }
    }
  }

  @include grid-system-vertical(full);
  @include grid-system-vertical(wlg);
  @include grid-system-vertical(lg);
  @include grid-system-vertical(wmd);
  @include grid-system-vertical(md);
  @include grid-system-vertical(sm);

  &--unGrow.flex-grid {
    flex: 0 0!important;
  }

  @include grid-system(full);
  @include grid-system(wlg);
  @include grid-system(lg);
  @include grid-system(wmd);
  @include grid-system(md);
  @include grid-system(sm);

}