/*
 # -----------------------------------------------------------------------------
 # ~/assets/themes/j1/modules//css/uno.css
 # Provides styles for J1 Module 
 #
 # Product/Info:
 # https://jekyll.one
 #
 # Copyright (C) 2023 Juergen Adams
 #
 # J1 Theme is licensed under the MIT License.
 # See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE.md
 # -----------------------------------------------------------------------------
*/

/*  multi-color bottom line (currently not used)
-------------------------------------------------------------------------------- */
/*
h2 {
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: lightgray;
}

span {
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: brown;
    display: inline-block;
    margin: 0 0 -1px 0;
    padding: 10px 3px;
}
*/

/* plugin controls
-------------------------------------------------------------------------------- */
.page-load-status, .page-scroll-last {
  display: none; /* hidden by default */
  padding-top: .5rem;
  border-top: 1px dotted #212121;
  /* text-align: center; */
  color: #777;
}

span.infinite-scroll-last {
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #212121;
    display: inline-block;
    margin: 0 0 -1px 0;
    padding: 10px 3px;
}

/* plugin spinner
-------------------------------------------------------------------------------- */
.loader-ellips {
  font-size: 20px; /* change size here */
  position: relative;
  width: 4em;
  height: 1em;
  margin: 10px auto;
}

.loader-ellips__dot {
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 0.5em;
  background: #555; /* change color here */
  position: absolute;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

.loader-ellips__dot:nth-child(1),
.loader-ellips__dot:nth-child(2) {
  left: 0;
}
.loader-ellips__dot:nth-child(3) { left: 1.5em; }
.loader-ellips__dot:nth-child(4) { left: 3em; }

@keyframes reveal {
  from { transform: scale(0.001); }
  to { transform: scale(1); }
}

@keyframes slide {
  to { transform: translateX(1.5em) }
}

.loader-ellips__dot:nth-child(1) {
  animation-name: reveal;
}

.loader-ellips__dot:nth-child(2),
.loader-ellips__dot:nth-child(3) {
  animation-name: slide;
}

.loader-ellips__dot:nth-child(4) {
  animation-name: reveal;
  animation-direction: reverse;
}