/*
 * responsive
 */

/*
 * device
 */
// window.getComputedStyle(document.documentElement).getPropertyValue('--media').trim()
@media @media-mobile {
  :root {
    --media: mobile;
  }
  .device:after {
    content: 'mobile';
  }
}
@media @media-tablet {
  :root {
    --media: tablet;
  }
  .device:after {
    content: 'tablet';
  }
}
@media @media-desktop {
  :root {
    --media: desktop;
  }
  .device:after {
    content: 'desktop';
  }
}
// window.getComputedStyle($0, ':after').content


/*
 * show/hide
 */
.hide {
  display: none !important;
}
@media @media-mobile {
  .s-hide {
    display: none !important;
  }

  .m-show { display: none !important; }
  .l-show { display: none !important; }
}
@media @media-tablet {
  .m-hide {
    display: none !important;
  }

  .s-show { display: none !important; }
  .l-show { display: none !important; }
}
@media @media-desktop {
  .l-hide {
    display: none !important;
  }

  .s-show { display: none !important; }
  .m-show { display: none !important; }
}

/*
 * grid
 */
.row {
  .flex;
  flex-wrap: wrap;
}

@media @media-mobile {
  .s-row {
    .flex;
    flex-wrap: wrap;
  }
}

@media @media-tablet {
  .m-row {
    .flex;
    flex-wrap: wrap;
  }  
}

@media @media-desktop {
  .l-row {
    .flex;
    flex-wrap: wrap;
  }  
}

// col
.for(1 2 3 4 5 6 7 8 9 10 11 12, {
  .col@{value} {
    width: (100% / 12 * @value);
  }
});

@media @media-mobile {
  .for(1 2 3 4 5 6 7 8 9 10 11 12, {
    .s-col@{value} {
      width: (100% / 12 * @value);
    }
  });
}

@media @media-tablet {
  .for(1 2 3 4 5 6 7 8 9 10 11 12, {
    .m-col@{value} {
      width: (100% / 12 * @value);
    }
  });
}

@media @media-desktop {
  .for(1 2 3 4 5 6 7 8 9 10 11 12, {
    .l-col@{value} {
      width: (100% / 12 * @value);
    }
  });
}

/*
 * flex
 */
@media @media-mobile {
  .s-flex { display: flex; }

  .s-flex-center { justify-content: center; }
  .s-flex-left { justify-content: flex-start; }
  .s-flex-right { justify-content: flex-end; }
  .s-flex-between { justify-content: space-between; }
  .s-flex-around { justify-content: space-around; }

  .s-flex-middle { align-items: center; }
  .s-flex-top { align-items: flex-start; }
  .s-flex-bottom { align-items: flex-end; }
  .s-flex-stretch { align-items: stretch; }

  .s-flex-heart { 
    justify-content: center; 
    align-items: center;
  }

  .s-flex-auto { flex: 1 1 auto; }

  .s-flex-fixed { 
    flex-grow: 0;
    flex-shrink: 0;
  }
  
  .s-flex-wrap { flex-wrap: wrap; }
  .s-flex-nowrap { flex-wrap: nowrap; }
  .s-flex-wrap-reverse { flex-wrap: wrap-reverse; }

  .s-flex-row { flex-direction: row; }
  .s-flex-row-reverse { flex-direction: row-reverse; }
  .s-flex-column { flex-direction: column; }
  .s-flex-column-reverse { flex-direction: column-reverse; }

  .s-text-center { text-align: center; }
  .s-text-left { text-align: left; }
  .s-text-right { text-align: right; }
  .s-text-justify { text-align: justify; }

  .s-f { .s-flex; }

  .s-fc { .s-flex-center; }
  .s-fl { .s-flex-left; }
  .s-fr { .s-flex-right; }

  .s-fm { .s-flex-middle; }
  .s-ft { .s-flex-top }
  .s-fb { .s-flex-bottom }

  .s-fh { .s-flex-heart; }
}
@media @media-tablet {
  .m-flex { display: flex; }

  .m-flex-center { justify-content: center; }
  .m-flex-left { justify-content: flex-start; }
  .m-flex-right { justify-content: flex-end; }
  .m-flex-between { justify-content: space-between; }
  .m-flex-around { justify-content: space-around; }

  .m-flex-middle { align-items: center; }
  .m-flex-top { align-items: flex-start; }
  .m-flex-bottom { align-items: flex-end; }
  .m-flex-stretch { align-items: stretch; }

  .m-flex-heart { 
    justify-content: center; 
    align-items: center;
  }
  
  .m-flex-auto { flex: 1 1 auto; }

  .m-flex-fixed { 
    flex-grow: 0;
    flex-shrink: 0;
  }

  .m-flex-wrap { flex-wrap: wrap; }
  .m-flex-nowrap { flex-wrap: nowrap; }
  .m-flex-wrap-reverse { flex-wrap: wrap-reverse; }

  .m-flex-row { flex-direction: row; }
  .m-flex-row-reverse { flex-direction: row-reverse; }
  .m-flex-column { flex-direction: column; }
  .m-flex-column-reverse { flex-direction: column-reverse; }

  .m-text-center { text-align: center; }
  .m-text-left { text-align: left; }
  .m-text-right { text-align: right; }
  .m-text-justify { text-align: justify; }

  .m-f { .m-flex; }

  .m-fc { .m-flex-center; }
  .m-fl { .m-flex-left; }
  .m-fr { .m-flex-right; }

  .m-fm { .m-flex-middle; }
  .m-ft { .m-flex-top }
  .m-fb { .m-flex-bottom }

  .m-fh { .m-flex-heart; }
}
@media @media-desktop {
  .l-flex { display: flex; }

  .l-flex-center { justify-content: center; }
  .l-flex-left { justify-content: flex-start; }
  .l-flex-right { justify-content: flex-end; }
  .l-flex-between { justify-content: space-between; }
  .l-flex-around { justify-content: space-around; }

  .l-flex-middle { align-items: center; }
  .l-flex-top { align-items: flex-start; }
  .l-flex-bottom { align-items: flex-end; }
  .l-flex-stretch { align-items: stretch; }

  .l-flex-heart {
    justify-content: center; 
    align-items: center;
  }
  
  .l-flex-auto { flex: 1 1 auto; }

  .l-flex-fixed { 
    flex-grow: 0;
    flex-shrink: 0;
  }
  .l-flex-wrap { flex-wrap: wrap; }
  .l-flex-nowrap { flex-wrap: nowrap; }
  .l-flex-wrap-reverse { flex-wrap: wrap-reverse; }

  .l-flex-row { flex-direction: row; }
  .l-flex-row-reverse { flex-direction: row-reverse; }
  .l-flex-column { flex-direction: column; }
  .l-flex-column-reverse { flex-direction: column-reverse; }

  .l-text-center { text-align: center; }
  .l-text-left { text-align: left; }
  .l-text-right { text-align: right; }
  .l-text-justify { text-align: justify; }

  .l-f { .l-flex; }

  .l-fc { .l-flex-center; }
  .l-fl { .l-flex-left; }
  .l-fr { .l-flex-right; }

  .l-fm { .l-flex-middle; }
  .l-ft { .l-flex-top }
  .l-fb { .l-flex-bottom }

  .l-fh { .l-flex-heart; }
}


/*
 * padding, margin
 */
@media @media-mobile {
  .define-padding(@nums-1-100, s-) !important;
  .define-margin(@nums-1-100, s-) !important;
  .define-negative-margin(@nums-1-32, s-) !important;
}
@media @media-tablet {
  .define-padding(@nums-1-100, m-) !important;
  .define-margin(@nums-1-100, m-) !important;
  .define-negative-margin(@nums-1-32, m-) !important;
}
@media @media-desktop {
  .define-padding(@nums-1-100, l-) !important;
  .define-margin(@nums-1-100, l-) !important;
  .define-negative-margin(@nums-1-32, l-) !important;
}


/*
 * font-size
 */
@media @media-mobile {
  .for(@nums, {
    .s-fs@{value} { font-size: @value * 1px !important; }
  });
}
@media @media-tablet {
  .for(@nums, {
    .m-fs@{value} { font-size: @value * 1px !important; }
  });
}
@media @media-desktop {
  .for(@nums, {
    .l-fs@{value} { font-size: @value * 1px !important; }
  });
}



@media @media-mobile {
  // line-height
  .for(@nums-1-32, {
    .s-lh@{value} {
      line-height: @value/10;
    }
  });
}
@media @media-tablet {
  // line-height
  .for(@nums-1-32, {
    .m-lh@{value} {
      line-height: @value/10;
    }
  });
}
@media @media-desktop {
  // line-height
  .for(@nums-1-32, {
    .l-lh@{value} {
      line-height: @value/10;
    }
  });
}

/*
 * letter-spacing
 */

@media @media-mobile {
  // 
  .for(@nums-1-32, {
    .s-letter-spacing-@{value} {
      letter-spacing: @value * 1px;
    }
  });
}
@media @media-tablet {
  .for(@nums-1-32, {
    .m-letter-spacing-@{value} {
      letter-spacing: @value * 1px;
    }
  });
}
@media @media-desktop {
  .for(@nums-1-32, {
    .l-letter-spacing-@{value} {
      letter-spacing: @value * 1px;
    }
  });
}


/*
 * size(width, height)
 */
@media @media-mobile {
  .define-size(@nums, s-) !important;
  .define-size-per(@nums-1-100, s-) !important;
  .define-size-util(s-) !important;
}
@media @media-tablet {
  .define-size(@nums, m-) !important;
  .define-size-per(@nums-1-100, m-) !important;
  .define-size-util(m-) !important;

}
@media @media-desktop {
  .define-size(@nums, l-) !important;
  .define-size-per(@nums-1-100, l-) !important;
  .define-size-util(l-) !important;
}

/*
 * position
 */
@media @media-mobile {
  .s-static { position: static; }
  .s-relative { position: relative; }
  .s-absolute { position: absolute; }
  .s-fixed { position: fixed; }
  .s-sticky { .sticky; }
}
@media @media-tablet {
  .m-static { position: static; }
  .m-relative { position: relative; }
  .m-absolute { position: absolute; }
  .m-fixed { position: fixed; }
  .m-sticky { .sticky; }
}
@media @media-desktop {
  .l-static { position: static; }
  .l-relative { position: relative; }
  .l-absolute { position: absolute; }
  .l-fixed { position: fixed; }
  .l-sticky { .sticky; }
}

/*
 * top, right, bottom, left
 */
@media @media-mobile {
  .for(@nums-1-100, {
    .s-t@{value} { top: @value * 1px !important; }
    .s-r@{value} { right: @value * 1px !important; }
    .s-b@{value} { bottom: @value * 1px !important; }
    .s-l@{value} { left: @value * 1px !important; }
  });
}
@media @media-tablet {
  .for(@nums-1-100, {
    .m-t@{value} { top: @value * 1px !important; }
    .m-r@{value} { right: @value * 1px !important; }
    .m-b@{value} { bottom: @value * 1px !important; }
    .m-l@{value} { left: @value * 1px !important; }
  });
}
@media @media-desktop {
  .for(@nums-1-100, {
    .l-t@{value} { top: @value * 1px !important; }
    .l-r@{value} { right: @value * 1px !important; }
    .l-b@{value} { bottom: @value * 1px !important; }
    .l-l@{value} { left: @value * 1px !important; }
  });
}

/*
 * white-space
 */
@media @media-mobile {
  .s-white-space-normal { white-space: normal; }
  .s-white-space-nowrap { white-space: nowrap; }
  .s-white-space-pre { white-space: pre; }
  .s-white-space-pre-line { white-space: pre-line; }
  .s-white-space-pre-wrap { white-space: pre-wrap; }
}
@media @media-tablet {
  .m-white-space-normal { white-space: normal; }
  .m-white-space-nowrap { white-space: nowrap; }
  .m-white-space-pre { white-space: pre; }
  .m-white-space-pre-line { white-space: pre-line; }
  .m-white-space-pre-wrap { white-space: pre-wrap; }
}
@media @media-desktop {
  .l-white-space-normal { white-space: normal; }
  .l-white-space-nowrap { white-space: nowrap; }
  .l-white-space-pre { white-space: pre; }
  .l-white-space-pre-line { white-space: pre-line; }
  .l-white-space-pre-wrap { white-space: pre-wrap; }
}