// Material theming tools
//

// Breakpoint mixins
// Media step breakpoint mixin based on Angular Material lib
@breakpoints: {
  xs: 'screen and (max-width: 599px)';
  sm: 'screen and (min-width: 600px) and (max-width: 959px)';
  md: 'screen and (min-width: 960px) and (max-width: 1279px)';
  lg: 'screen and (min-width: 1280px) and (max-width: 1919px)';
  xl: 'screen and (min-width: 1920px) and (max-width: 5000px)';
  lt-sm: 'screen and (max-width: 599px)';
  lt-md: 'screen and (max-width: 959px)';
  lt-lg: 'screen and (max-width: 1279px)';
  lt-xl: 'screen and (max-width: 1919px)';
  gt-xs: 'screen and (min-width: 600px)';
  gt-sm: 'screen and (min-width: 960px)';
  gt-md: 'screen and (min-width: 1280px)';
  gt-lg: 'screen and (min-width: 1920px)';
}

// Re-map the breakpoints for the helper classes
@helper-breakpoints: {
  xs: null;
  sm: 'gt-xs';
  md: 'gt-sm';
  lg: 'gt-md';
  xl: 'gt-lg';
}

.media-breakpoint(@breakpointName; @rules) {

  @mediaQuery: @breakpoints[$@breakpointName];
  //& when(@mediaQuery) {
  @media (@mediaQuery) {
    @rules();
  }
  //}
  //& when (default()) {
  //  @rules();
  //}
}

// custom compatible flib

.mag-page-wrap {
  position: relative;
  flex: 1 1 auto;
  overflow: auto;
  //height: 100vh;
}

// page-layout : sidebar-layout

.mag-sidebar-page-layout {

  .outer-content {
    //margin: 24px 24px 0 24px;
    margin: 0 24px 0 24px;
    padding-top: 16px;
    margin-bottom: 0; // 사이드바 스크롤이 있는 경우는 bottom 을 주지 않는다.
    //background: #fff;
    //text-align: center;
  }

  .inner-content {
    //margin: 24px;
    margin-top: 16px;
    padding:8px;

    background: #fff;
    //text-align: center;
  }

  .sidebar {
    //overflow:  auto;
    position: relative;
    //height: calc(100vh - 196px - 24px);
  }
  .operate {
    margin-bottom: 16px;

    .table-operation-tool-buttons {
      text-align: right;
    }
  }

  .operate span {
    margin-left: 8px;
  }

}

// page-layout : common

.mag-page-layout-search-form {
  background: #fff;
  //border: 1px solid red;

  .ant-descriptions-row > td, .ant-descriptions-row > th {
    padding-bottom: 0px;
  }
  //padding: 8px;

  form {
    padding:8px 8px 8px 8px;
    //padding: 24px;
    background: #fff;

    //background: #fbfbfb;
    //border: 1px solid #d9d9d9;
    //border-radius: 6px;

    margin-left: -8px;
    margin-right: -8px;
    //margin-bottom: 16px;

  }

  [nz-form-label] {
    overflow: visible;
  }

  button {
    margin-left: 8px;
  }

  .collapse {
    margin-left: 8px;
    font-size: 12px;
  }

  .search-area {
    text-align: right;
  }
}

// modal
mag-modal-template {
  background-color: #fff;
  nz-layout.ant-layout {

  }
  .outer-content {
    background: #fff; // override .ant-layout ()



    //margin: 24px 24px 0 24px;
    //margin-bottom: 0; // 사이드바 스크롤이 있는 경우는 bottom 을 주지 않는다.
  }

  .inner-content {
    //margin: 24px;
    padding:8px;

    background: #fff;
    //text-align: center;
  }

  .sidebar {
    //overflow:  auto;
    position: relative;
    //height: calc(100vh - 196px - 24px);
  }
  .operate {
    margin-bottom: 16px;
  }

  .operate span {
    margin-left: 8px;
  }
}

/**
 * https://junistory.blogspot.com/2017/06/css-ellipsis.html
 */
.mag-ellipsis {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mag-pointer {
  cursor: pointer;
}

/**
 * nz-zorro resizable table
 */

.resize-trigger {
  width: 1px;
  height: 30px;
  margin-top: 12px;
  background: #e8e8e8;
}
.nz-resizable-preview {
  border-width: 0;
  border-right-width: 1px;
}