/*!******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./styles/ui-system.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************/
/* =========================================================
   GLOBAL BUTTON EFFECT
========================================================= */

.ant-btn[data-kind],
button[data-kind] {
  border-radius: 10px !important;
  font-weight: 850 !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease,
    background .18s ease,
    border-color .18s ease,
    color .18s ease !important;

  will-change:
    transform,
    box-shadow;

  transform:
    translateY(0);

  box-shadow:
    0 2px 6px rgba(15,23,42,.04);
}

/* HOVER */

.ant-btn[data-kind]:hover:not(:disabled),
button[data-kind]:hover:not(:disabled) {

  transform:
    translateY(-2px);

  box-shadow:
    0 10px 24px rgba(15,23,42,.12),
    0 4px 10px rgba(15,23,42,.06) !important;

  filter:
    brightness(1.01);
}

/* ACTIVE / CLICK */

.ant-btn[data-kind]:active:not(:disabled),
button[data-kind]:active:not(:disabled) {

  transform:
    translateY(0px) scale(.985);

  box-shadow:
    0 2px 6px rgba(15,23,42,.08) !important;
}