/***** Hoverable *****/

/* @usage
 *  [:button {:data-hoverable true} "My button"]
 *
 * @usage
 *  [:button {:data-clickable true :data-hoverable true} "My button"]
 *
 * The hoverable definition must be above the clickable definition (because the CSS cascade)!
 * The clickable must be more opaquer than the hoverable! */

[data-hoverable="true"]:hover {
  opacity: .7 !important;
}

/***** Hoverable *****/



/***** Clickable *****/

/* @usage
 *  [:button {:data-clickable true} "My button"]
 *
 * @usage
 *  [:button {:data-clickable true :data-hoverable true} "My button"]
 *
 * Don't forget to set up the on-mouse-up event to blur the element! */

[data-clickable="true"]:active,
[data-clickable="true"]:focus {
  opacity: .5 !important;
}

/***** Clickable *****/



/***** Debug *****/

/* A [data-debug="true"]::after pszeudóelem használatával az egyes elemeken
 * a debug animáció jelzi azok újrarenderelődését */

[data-debug="true"]::after {
  animation-duration: .5s;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-name: opacity-1-0;
  background-color: rgba(50, 50, 200, .3);
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/***** Debug *****/



/***** Disabled *****/

/* @usage
 *  [:button {:data-disabled true} "My button"] */

[data-disabled="true"]::after {
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

[data-disabled="true"] {
  cursor:  default !important;
  opacity: .5      !important;
}

/***** Disabled *****/



/***** Scrollable *****/

/* @usage
 *  [:div {:data-scrollable-y true} "My scroll-container"] */

[data-scrollable-x="true"],
[data-scrollable-y="true"],
[data-hide-scrollbar="true"] {
  /* Hide scrollbar for IE and Edge */
  -ms-overflow-style: none;
  /* Hide scrollbar for Firefox */
  scrollbar-width: none;
}

[data-scrollable-x="true"]::-webkit-scrollbar,
[data-scrollable-y="true"]::-webkit-scrollbar,
[data-hide-scrollbar="true"]::-webkit-scrollbar {
  /* Hide scrollbar for Chrome, Safari and Opera */
  display: none;
}

[data-scrollable-x="true"] {
  overflow-x: auto;
}

[data-scrollable-y="true"] {
  overflow-y: auto;
}

/***** Scrollable *****/



/***** Selectable *****/

/* @usage
 *  [:p {:data-selectable false} "My unselectable text"] */

[data-selectable="false"] {
  /* user-select not supperted properly in all browsers */
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

/***** Selectable *****/