/*
 * display
 */
.block { display: block !important; }
.inline { display: inline !important; }
.inline-block { display: inline-block !important; }

/*
 * visible
 */
.visible { visibility: visible; }
.invisible { visibility: hidden; }

/*
 * overflow
 */
.overflow-hidden {
  overflow: hidden !important;
}
.overflow-auto {
  overflow: auto !important;
}
.overflow-scroll {
  overflow: scroll !important;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
.overflow-x-scroll {
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
.overflow-y-scroll {
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

/*
 * scrollbar
 */
.scrollbar-none, .scrollbar-hide {
  // firefox
  -ms-overflow-style: none;
  // ie
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

/*
 * object-fit
 */
.object-fit-cover { object-fit: cover; }
.object-fit-contain { object-fit: contain; }

.object-position-top { object-position: 50% 0%; }
.object-position-middle { object-position: 50% 50%; }
.object-position-bottom { object-position: 50% 100%; }

/*
 * transition
 */
.transition {
  transition: 256ms;
}
.transition-512 {
  transition: 512ms;
}
.transition-1024 {
  transition: 1024ms;
}

/*
 * animation
 */
.fadeIn {
  transition: 256ms;
  opacity: 1 !important;
}
.fadeOut {
  transition: 256ms;
  opacity: 0 !important;
}

/*
 * gpu
 */
 .gpu-enable {
  transform: translate3d(0px, 0px, 0px);
}
.gpu-disable {
  transform: initial;
}

/*
 * filter
 */
.filter-grayscale {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  filter: grayscale(100%);
}

/*
 * opacity
 */
.for(0 10 20 30 40 50 60 70 80 90 100, {
  .opacity-@{value} { opacity: @value * 0.01; }
});

/*
 * show/hide
 */
.show {
  display: block !important;
}
.hide {
  display: none !important;
}
.hide-last:last-child {
  display: none !important;
}

// shadow
.box-shadow {
  box-shadow: 0px 0px 4px 0px #222;
}
.box-shadow-1 {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.box-shadow-2 {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.box-shadow-3 {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.box-shadow-4 {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.box-shadow-5 {
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
}

// cursor
each(auto default pointer move text crosshair cell help grab grabbing zoom-in zoom-out not-allowed wait progress none alias context-menu vertical-text n-resize e-resize s-resize w-resize nw-resize ne-resize se-resize sw-resize ew-resize ns-resize nesw-resize nwse-resize col-resize row-resize all-scroll copy no-drop , {
  .cursor-@{value} {
    cursor: @value;
  }
  .cursor-@{value}-active:active {
    cursor: @value;
  }
});

// pointer event
.pointer-none {
  pointer-events: none;
}

// list
.list-style-type-disc { list-style-type: disc; }
.list-style-type-circle { list-style-type: circle; }
.list-style-type-square { list-style-type: square; }
.list-style-type-decimal { list-style-type: decimal; }
.list-style-type-georgian { list-style-type: georgian; }
.list-style-type-cjk-ideographic { list-style-type: cjk-ideographic; }
.list-style-type-kannada { list-style-type: kannada; }
.list-style-type-none { list-style-type: none; }

// table
.border-collapse-collapse { border-collapse: collapse; }
.border-collapse-separate { border-collapse: separate; }

.table-layout-fixed { table-layout: auto; }
.table-layout-fixed { table-layout: fixed; }

// writing-mode
.writing-horizontal-tb {
  writing-mode: horizontal-tb;
}
.writing-vertical-lr {
  writing-mode: vertical-lr;
}
.writing-vertical-rl {
  writing-mode: vertical-rl;
}

// hover
.hover-underline:hover {
  border-bottom: 1px solid currentColor;
}

.hover-trigger:not(:hover) {
  &.hover-show, .hover-show {
    display: none !important;
  }
  &.hover-appear, .hover-appear {
    opacity: 0;
  }
}

.define-hover(rotate-45, {
  .rotate-45;
});
.define-hover(rotate-90, {
  .rotate-90;
});
.define-hover(rotate-180, {
  .rotate-180;
});
.define-hover(rotate-270, {
  .rotate-270;
});
.define-hover(rotate-n45, {
  .rotate-n45;
});
.define-hover(rotate-n90, {
  .rotate-n90;
});
.define-hover(rotate-n180, {
  .rotate-n180;
});
.define-hover(rotate-n270, {
  .rotate-n270;
});

.define-hover(scale-80, {
  .scale-80;
});
.define-hover(scale-120, {
  .scale-120;
});
.define-hover(scale-200, {
  .scale-200;
});

// content
.width-min-content {
  width: min-content;
}
.width-fit-content {
  width: fit-content;
}
.width-max-content {
  width: max-content;
}