@import "./checkbox.css";
@import "./new-note.css";
@import "./slate-editor.css";
@import "./scrollbar.css";

/* Note:
Have had a hell of a time getting smooth animations to work in Chrome.
Seems to be a known issue, related to hardware acceleration.
Safari is simply way smoother.

See below for links that might help us optimize things:
https://stackoverflow.com/questions/37629745/why-isnt-my-css3-animation-smooth-in-google-chrome-but-very-smooth-on-other-br
https://www.sitepoint.com/introduction-to-hardware-acceleration-css-animations/
https://www.urbaninsight.com/article/improving-html5-app-performance-gpu-accelerated-css-transitions
https://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

Adding this to anything with an animation seems to force HW acceleration on.
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

*/

/*
    Ripple Effect
      source - https://github.com/mladenplavsic/css-ripple-effect/blob/master/src/ripple.less
      explanation - https://codeburst.io/create-a-material-design-ripple-effect-without-js-9d3cbee25b3e
      alternative if needed - https://ghinda.net/article/css-ripple-material-design/
      more details - https://medium.com/@leonardo.monteiro.fernandes/css-techniques-for-material-ripple-effect-3f0ece3062a0
*/
.ripple {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  position: relative;
  overflow: hidden;
}
.ripple:after {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #000000 20%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(5, 5);
  opacity: 0;
  transition: transform 0.25s ease-out, opacity 0.5s;
}
.ripple:active:after {
  transform: scale(0, 0);
  opacity: 0.2;
  transition: 0s;
}

/* Color/Elevation transitions */
.background-transition {
  transition: background-color 150ms ease-in-out;
}

.background-and-shadow-transition {
  transition-property: box-shadow, background-color;
  transition-duration: 125ms;
  transition-timing-function: ease-in-out;
}

/* Expand in from the left */
.animate-expand-in {
  animation: 0.5s ease-in-out 0s 1 expandInFromLeft;
}

@keyframes expandInFromLeft {
  0% {
    transform: translateX(-50%) scaleX(0);
  }
  100% {
    transform: translateX(0) scaleX(1);
  }
}

/* Tab Bottom Line Animation */
.tab-animation {
  transition: width 0.35s ease;
  -webkit-transition: width 0.35s ease;
  -moz-transition: width 0.35s ease;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}

/* Blow Up Animation */
.blow-up-animation {
  animation: blowUp 0.1s ease;
}
@keyframes blowUp {
  0% {
    transform: scale(0.97);
  }
  100% {
    transform: scale(1);
  }
}

/* Tutorial arrow animation */
.tutorial-arrow-animation {
  animation: 1.5s up-wipe;
}
@keyframes up-wipe {
  0% {
    clip-path: circle(20% at 50% 100%);
  }
  80% {
    clip-path: circle(50%);
  }
  100% {
    clip-path: circle(100%);
  }
}

/*
  Loading Animation
  https://loading.io/css/
*/
.lds-ring {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 51px;
  height: 51px;
  margin: 6px;
  border: 6px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #8000d0 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Disable text selection */
.no-select {
  cursor: default;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

/* Recolor text selection to purple */
::selection {
  color: rgb(0, 0, 0);
  background-color: rgb(226, 211, 254);
}

/* Searchbar */
.searchbar-transition > label > div {
  transition: box-shadow 0.25s ease;
  transition: background 0.25s ease;
}

/* Shimmer Loading Effect

The wrapper adds a nice initial load effect that's more noticiable than the
infinite shimmer but doesn't look great if the loading time is less than 1
second.

*/
.shimmer {
  animation: shimmer 1.5s infinite linear;
  background: linear-gradient(to right, #b2b2b2 0%, #ddd 15%, #b2b2b2 40%);
  background-size: 400px 100%;
}

.shimmer-light {
  animation: shimmer 1.5s infinite linear;
  background: linear-gradient(to right, #ebebeb 0%, #cbcbcb 15%, #ebebeb 40%);
  background-size: 400px 100%;
}

@keyframes shimmer {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}

.shimmer-wrapper {
  transform-origin: 0;
  animation: reveal 0.1s forwards cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes reveal {
  from {
    transform: scaleX(0.4);
    opacity: 0.1;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* Delay showing things */

@keyframes delay-reveal {
  0% {
    opacity: 0;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes delay-reveal-smooth {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes delay-remove-smooth {
  0% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Action Item debounce fadeout */

@keyframes removeActionItem {
  0% {
    opacity: 1;
    transform: scaleY(1);
  }
  50% {
    opacity: 0.6;
    transform: scaleY(1);
  }
  80% {
    opacity: 0.35;
    transform: scaleY(1);
  }
  97% {
    opacity: 0.25;
    transform: scaleY(1);
  }
  100% {
    opacity: 0.2;
    transform: scaleY(0.6);
  }
}

/* Tooltip styling */
.tooltip .tooltip-text {
  visibility: hidden;
  opacity: 0;
}

/* Sometimes we want to hide the tooltip w/o removing the element in Elm.

e.g. conditionally removing a tooltip element can lead to unwanted blur/focus
behavior since one is manipulating the structure of the vdom.
*/
.hide-tooltip .tooltip-text {
  visibility: hidden !important;
  opacity: 0 !important;
}

@media (hover: hover) {
  /*  Disable tooltips on mobile */
  .tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transition: opacity 180ms;
    transition-delay: 250ms;
  }
}

@keyframes scaleX-1-to-0 {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

@keyframes become-transparent {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* This serves to override text elements default behavior within elm-ui's
paragraph. Unfortunately there is no way to override it wi/ elm-ui's API afaikt.
We currently use this for rendering mention chips within action items rich text.
 */
.no-wrap-within-paragraph div {
  white-space: nowrap !important;
}

/* Attachment thumbnails */
.attachment-thumbnail .attachment-menu-button {
  opacity: 0;
}

.attachment-thumbnail:hover .attachment-menu-button {
  opacity: 1;
}

.attachment-menu-button:focus {
  opacity: 1;
}

/*Disable dragging thumbnail image*/
.attachment-thumbnail img {
  pointer-events: none;
}

.attachment-thumbnail:hover img {
  filter: brightness(85%);
}

/* Focus helper */
.focusable:focus-visible {
  background-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0px 0px 0px 3px rgba(155, 203, 255, 1);
  transition: box-shadow 100ms;
  outline: none;
}

.focusable-only-border-styling:focus-visible {
  box-shadow: 0px 0px 0px 3px rgba(155, 203, 255, 1);
  transition: box-shadow 100ms;
  outline: none;
}