@use 'doggistyle' as *; // Doggistyle Reset

.cover.show {
  border-bottom:1px solid #EDEDED;
}
.sidebar > .app-name .app-name-link { 
  text-align: left; 
  width: 100%;
  display: flex;
  align-items: center;
  height:40px;
  padding-left:calc(15px + 40px + 15px); 
  background:url('http://i.imgur.com/DrR97Jt.png') 15px center / auto 40px no-repeat;
  transition:color 0.2s ease-in-out;
}
.sidebar > .app-name .app-name-link:hover { 
  color:var(--theme-color,#42b983);
}
.sidebar ul li > p > a {
  font-weight: 700;
  margin: 0;
  font-size:15px; 
  color:inherit;
}
.sidebar ul li > p.active > a {
  border-right: 2px solid;
  color: var(--theme-color,#42b983);
}
.sidebar ul li ul li:before {
  content: "-";
    padding-right: 4px;
    float: left;
}

h2#eases + p + table tbody > tr:nth-of-type(2),
h2#eases + p + table tbody > tr:nth-of-type(12),
h2#eases + p + table tbody > tr:nth-of-type(22) {
  color: #364149;
  font-weight:bold; 
  border:1px solid #ddd; 
}

h2#eases + p + table tbody > tr:nth-of-type(2) td,
h2#eases + p + table tbody > tr:nth-of-type(12) td,
h2#eases + p + table tbody > tr:nth-of-type(22) td { border:none; }

.markdown-section output:after, .markdown-section pre[data-lang="css"]:after { content : 'sass'; }

.search input {
  padding-left:34px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23C0C0C0' d='M508.5 468.9 387.1 347.5c-2.3-2.3-5.3-3.5-8.5-3.5h-13.2c31.5-36.5 50.6-84 50.6-136C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c52 0 99.5-19.1 136-50.6v13.2c0 3.2 1.3 6.2 3.5 8.5l121.4 121.4c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17zM208 368c-88.4 0-160-71.6-160-160S119.6 48 208 48s160 71.6 160 160-71.6 160-160 160z'/%3E%3C/svg%3E%0A") 7px center / auto 20px no-repeat;
}

.colour-example {
  width:100px;
  height:20px; 
  color:white; 
  text-align:center;
  font-weight: bold;
}

.colour-example.light {
  color:black;
}

.ease-example {
  width:300px;
  height:20px; 
  border:dashed 1px #666666;
  position: relative;
}
.sidebar .ease-example { display: none;}

.ease-example::after {
  content:"";
  width:12px; 
  height:12px;
  top:3px;
  left:3px;  
  border-radius: 50%;
  background-color: var(--theme-color);
  display: block;
  position: absolute;
  animation-fill-mode: forwards;
  animation: ease-example 3s linear 0s infinite;
}

@keyframes ease-example {
  0%, 33% { transform: translateX(0px);}
  66%, 100% {transform: translateX(280px)}
}

.ease-example.linear::after { animation-timing-function : $ease-linear; }
.ease-example.in::after { animation-timing-function : $ease-in; }
.ease-example.out::after { animation-timing-function : $ease-out; }
.ease-example.in-out::after { animation-timing-function : $ease-in-out; }
.ease-example.in-quad::after { animation-timing-function : $ease-in-quad; }
.ease-example.in-cubic::after { animation-timing-function : $ease-in-cubic; }
.ease-example.in-quart::after { animation-timing-function : $ease-in-quart; }
.ease-example.in-quint::after { animation-timing-function : $ease-in-quint; }
.ease-example.in-sine::after { animation-timing-function : $ease-in-sine; }
.ease-example.in-expo::after { animation-timing-function : $ease-in-expo; }
.ease-example.in-circ::after { animation-timing-function : $ease-in-circ; }
.ease-example.in-back::after { animation-timing-function : $ease-in-back; }
.ease-example.out-quad::after { animation-timing-function : $ease-out-quad; }
.ease-example.out-cubic::after { animation-timing-function : $ease-out-cubic; }
.ease-example.out-quart::after { animation-timing-function : $ease-out-quart; }
.ease-example.out-quint::after { animation-timing-function : $ease-out-quint; }
.ease-example.out-sine::after { animation-timing-function : $ease-out-sine; }
.ease-example.out-expo::after { animation-timing-function : $ease-out-expo; }
.ease-example.out-circ::after { animation-timing-function : $ease-out-circ; }
.ease-example.out-back::after { animation-timing-function : $ease-out-back; }
.ease-example.in-out-quad::after { animation-timing-function : $ease-in-out-quad; }
.ease-example.in-out-cubic::after { animation-timing-function : $ease-in-out-cubic; }
.ease-example.in-out-quart::after { animation-timing-function : $ease-in-out-quart; }
.ease-example.in-out-quint::after { animation-timing-function : $ease-in-out-quint; }
.ease-example.in-out-sine::after { animation-timing-function : $ease-in-out-sine; }
.ease-example.in-out-expo::after { animation-timing-function : $ease-in-out-expo; }
.ease-example.in-out-circ::after { animation-timing-function : $ease-in-out-circ; }
.ease-example.in-out-back::after { animation-timing-function : $ease-in-out-back; }

.docsify-copy-code-button.error .error, .docsify-copy-code-button.success .success {
  transform: translate(-20%,-50%) !important;
}
.docsify-copy-code-button {
  font-size: 0.8em !important;
}

@media (prefers-color-scheme: dark) {

  body, .sidebar { background: #282C34;  color: #b4b4b4; }

  .cover.show {
    border-bottom:none;
  }
  .markdown-section p.tip code {
    background-color: #efefef12;
  }

  h2#eases + p + table tbody > tr:nth-of-type(2),
  h2#eases + p + table tbody > tr:nth-of-type(12),
  h2#eases + p + table tbody > tr:nth-of-type(22) {
    background-color: #ffffff38;
    color: white;
    border:1px solid #383838; 
  }

  .sidebar ul li > a, 
  .anchor span, 
  .markdown-section h1, 
  .markdown-section h2, 
  .markdown-section h3, 
  .markdown-section h4, 
  .markdown-section strong {
    color: #b4b4b4;
  }
  
  .markdown-section code, 
  .markdown-section pre,
  .markdown-section pre > code {
    background-color: #2F333D;
    color: var(--theme-color,#42b983);
  }

  .token.tag, .token.attr-name { 
    color: #55a2e9;
  }
  .token.punctuation {
    color:#818181;
  }
  
  .sidebar {
    border-right-color: #383838;
  }
  .search { 
    border-bottom-color: #383838 !important; 
  }

  .search input { color:white; }

  section.cover {
    background: #282C34 !important;
  }
  section.cover h1 a span { 
    color: white;
  }
  section.cover .cover-main>p:last-child a {
    transition:all 0.2s ease-in-out;
    color:white;
  }
  section.cover .cover-main>p:last-child a:first-child{
    --theme-color : #F4B647; 
  }
  section.cover .cover-main>p:last-child a:last-child{
    background-color:transparent;
  }
  section.cover .cover-main>p:last-child a:hover,
  section.cover .cover-main>p:last-child a:last-child:hover {
    color:white; 
    opacity:1;
    background-color:var(--theme-color,#42b983);
  }
  .markdown-section p.tip, .markdown-section tr:nth-child(2n) {
    background-color: rgba(255,255,255,0.05);
  }
  .markdown-section td, .markdown-section th { border-color: #383838;}

}