//  This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
//  Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
//  structured like the flavor description below, will be included in your final CSS file.
/*
  Flavor name: Default (mini-default)
  Author: Angelos Chalaris (chalarangelo@gmail.com)
  Maintainers: Angelos Chalaris
  mini.css version: v3.0.0-alpha.2
*/

$fore-color-var:                '--f-col';
$secondary-fore-color-var:      '--f-col2';
$back-color-var:                '--b-col';
$secondary-back-color-var:      '--b-col2';
$blockquote-color-var:          '--blq-col';
$pre-color-var:                 '--pre-col';
$border-color-var:              '--br-col';
$secondary-border-color-var:    '--br-col2';
$heading-ratio-var:             '--h-ratio';
$universal-margin-var:          '--u-m';
$universal-padding-var:         '--u-p';
$universal-border-radius-var:   '--u-br-r';
$universal-box-shadow-var:      '--u-bx-shd';
$a-link-color-var:              '--a-l-col';
$a-visited-color-var:           '--a-v-col';

$code-font-size:  0.8125em;

@import 'core';

$grid-container-name:          'container';
$grid-row-name:                'row';
$grid-row-parent-layout-prefix:'cols';
$grid-column-prefix:           'col';
$grid-column-offset-suffix:    'o';
$grid-order-normal-suffix:     'n';
$grid-order-first-suffix:      'f';
$grid-order-last-suffix:       'l';
$grid-small-prefix:            'sm';
$grid-medium-prefix:           'md';
$grid-large-prefix:            'lg';

$card-fore-color-var:          '--cd-f-col';
$card-back-color-var:          '--cd-b-col';
$card-border-color-var:        '--cd-br-col';

$_include-parent-layout: false;

@import 'layout';

/*
  Custom elements for card elements.
*/

$card-fluid-name:              'fluid';            // Class name for fluid cards.
$card-fluid-width:             100%;               // Width for fluid cards.
@include make-card-alt-size ($card-fluid-name, $card-fluid-width);

$card-section-double-padded-name:    'double-padded';   // Class name for card double-padded section variant.
$card-section-double-padded-padding:  calc(1.5 * var(#{$universal-padding-var}));  // Padding for card sectiondouble-padded section variant.
@include make-card-section-alt-style($card-section-double-padded-name, $card-section-double-padded-padding);

.#{$card-name} {
  box-shadow: 0 1.25rem 2.5rem -0.625rem rgba(0, 32, 64, 0.1);
}

.#{$card-name} > h3.#{$card-section-name}.#{$card-section-double-padded-name} {
  padding: calc(3 * var(#{$universal-padding-var}));
}

.#{$card-name} > .#{$card-section-name}.#{$card-section-double-padded-name} > p {
  margin: var(#{$universal-margin-var}) calc(var(#{$universal-margin-var}) / 2);
}

.#{$card-name} + .#{$card-name} {
  margin-top: calc(5 * var(#{$universal-margin-var}));
}

$form-back-color-var:         '--frm-b-col';
$form-fore-color-var:         '--frm-f-col';
$form-border-color-var:       '--frm-br-col';
$input-back-color-var:        '--in-b-col';
$input-fore-color-var:        '--in-f-col';
$input-border-color-var:      '--in-br-col';
$input-focus-color-var:       '--in-fc-col';
$input-invalid-color-var:     '--in-inv-col';
$button-back-color-var:       '--btn-b-col';
$button-hover-back-color-var: '--btn-h-b-col';
$button-fore-color-var:       '--btn-f-col';
$button-border-color-var:       '--btn-br-col';
$button-hover-border-color-var: '--btn-h-br-col';
$button-group-border-color-var: '--btn-grp-br-col';


$_include-fluid-input-group: true;

@import 'input_control';

/*
  Custom elements for forms and input elements.
*/
$button-primary-name:            'primary';   // Class name for primary button color variant.
$button-primary-back-color:      #1976d2;     // Background color for primary button color variant.
$button-primary-hover-back-color:#1565c0;     // Background color for primary button color variant (hover).
$button-primary-fore-color:      #f8f8f8;     // Text color for primary button color variant.
@include make-button-alt-color ($button-primary-name, $button-primary-back-color, $button-primary-hover-back-color, $button-primary-fore-color);


$header-fore-color-var:          '--hd-f-col';
$header-back-color-var:          '--hd-b-col';
$header-hover-back-color-var:    '--hd-hv-b-col';
$header-border-color-var:        '--hd-br-col';
$nav-fore-color-var:             '--nv-f-col';
$nav-back-color-var:             '--nv-b-col';
$nav-hover-back-color-var:       '--nv-hv-b-col';
$nav-border-color-var:           '--nv-br-col';
$nav-link-color-var:             '--nv-ln-col';
$footer-fore-color-var:          '--ft-f-col';
$footer-back-color-var:          '--ft-b-col';
$footer-border-color-var:        '--ft-br-col';
$footer-link-color-var:          '--ft-ln-col';
$drawer-back-color-var:          '--dr-b-col';
$drawer-border-color-var:        '--dr-br-col';
$drawer-hover-back-color-var:    '--dr-hv-b-col';
$drawer-close-color-var:         '--dr-cl-col';


$nav-sublink-depth:    1;

$_drawer-right: false;

@import 'navigation';

$mark-back-color: #424242;
$mark-font-size: 0.5em;

$toast-back-color:       #212121;

$mark-back-color-var:         '--mrk-b-col';
$mark-fore-color-var:         '--mrk-f-col';
$toast-back-color-var:        '--tst-b-col';
$toast-fore-color-var:        '--tst-f-col';
$tooltip-back-color-var:      '--tltp-b-col';
$tooltip-fore-color-var:      '--tltp-f-col';
$modal-overlay-color-var:     '--mdl-ov-col';
$modal-close-color-var:       '--mdl-cl-col';
$modal-close-hover-back-color-var: '--mdl-cl-h-col';
$collapse-label-back-color-var:    '--clps-lbl-b-col';
$collapse-label-fore-color-var:    '--clps-lbl-f-col';
$collapse-label-hover-back-color-var:    '--clps-lbl-h-b-col';
$collapse-selected-label-back-color-var: '--clps-sel-lbl-b-col';
$collapse-border-color-var:        '--clps-br-col';
$collapse-content-back-color-var:  '--clps-cnt-b-col';
$collapse-selected-label-border-color-var: '--clps-sel-lbl-br-col';

$_include-modal: false;
$_include-tooltip: false;
$_include-collapse: false;

@import 'contextual';

div,main,nav{
  -webkit-overflow-scrolling: touch;
}
.#{$toast-name} {
  bottom: calc(var(#{$universal-margin-var}) / 2);
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

mark {
  position: relative;
  top: -0.25rem;
  left: 0.25rem;
}

/*
  Custom elements for contextual background elements, toasts and tooltips.
*/
$mark-secondary-name:            'secondary'; // Class name for secondary <mark> color variant.
$mark-secondary-back-color:      #d32f2f;     // Background color for secondary <mark> color variant.
@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);

$mark-tertiary-name:            'tertiary';  // Class name for tertiary <mark> color variant.
$mark-tertiary-back-color:      #308732;     // Background color for tertiary <mark> color variant.
@include make-mark-alt-color ($mark-tertiary-name, $mark-tertiary-back-color);

$mark-tag-name:                 'tag';       // Class name, padding and border radius for tag <mark> size variant.
$mark-tag-padding:      calc(var(#{$universal-padding-var})/2) var(#{$universal-padding-var});
$mark-tag-border-radius:        1em;
@include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);

// Website-specific styles
code, pre, kbd, code *, pre *, kbd *, code[class*="language-"], pre[class*="language-"] {
  font-family: Menlo, Consolas, monospace !important;
}
pre {
  border: 0.0625rem solid var(#{$secondary-border-color-var});
  border-radius: var(#{$universal-border-radius-var});
}

.search {
  font-size: 0.875rem;
}

header h1.logo {
  margin-top: -0.8rem;
  text-align:center;
  position: relative;
  top: 0;
  transition: top 0.3s;
  color: #111;
}

h1 a, h1 a:link, h1 a:visited {
  text-decoration:none;
  color: #111;
  &:hover, &:focus {
    text-decoration:none;
    color: #111;
  }
}

header #title {
  position:relative;
  top: -1rem;
  @media screen and (max-width: 768px) { display: none; }
}

header {
  background: linear-gradient(
    135deg,
    rgba(255, 174, 39, 1) 0%,
    rgba(222, 73, 109, 1) 100%
  );
}

header h1 small {
  display:block;
  font-size: 0.875rem;
  color: #888;
  margin-top: 0.75rem;
}

label#menu-toggle {
  position: absolute;
  left: 0rem;
  top: 0rem;
  width: 3.4375rem;
}

main {
  padding: 0;
}

:root {
  #{$collapse-label-back-color-var}:  $collapse-label-back-color;
  #{$collapse-label-fore-color-var}:  $collapse-label-fore-color;
  #{$collapse-label-hover-back-color-var}:  $collapse-label-hover-back-color;
  #{$collapse-selected-label-back-color-var}: $collapse-selected-label-back-color;
  #{$collapse-border-color-var}: $collapse-border-color;
  #{$collapse-content-back-color-var} : $collapse-content-back-color;
  #{$collapse-selected-label-border-color-var}: $collapse-selected-label-border-color;
}
label.#{$collapse-name} {
  width: 100%;
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.3s;
  color: var(#{$collapse-label-fore-color-var});
  background: var(#{$collapse-label-back-color-var});
  border: $__1px solid var(#{$collapse-border-color-var});
  padding: calc(1.5 * var(#{$universal-padding-var}));
  border-radius: var(#{$universal-border-radius-var});
  &:hover, &:focus {
    background: var(#{$collapse-label-hover-back-color-var});
  }
  + pre {
    box-sizing: border-box;
    height: 0;
    max-height: 1px;
    overflow: auto;
    margin: 0;
    border: 0;
    padding: 0;
    transition: max-height 0.3s;
  }
  &.toggled {
    background: var(#{$collapse-selected-label-back-color-var});
    border-bottom-color: var(#{$collapse-selected-label-border-color-var});
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    + pre {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      position: relative;
      width: 100%;
      height: auto;
      border: $__1px solid var(#{$collapse-border-color-var});
      border-top: 0;
      padding: calc(2 * var(#{$universal-padding-var}));
      max-height: $collapse-content-max-height;
    }
  }
}

button.primary.clipboard-copy {
  width: 100%;
  margin-left: 0;
  > img {
    vertical-align: bottom;
  }
}

code[class*="language-"],
pre[class*="language-"] {
  color: #222;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.8;

  -moz-tab-size: 2;
  -o-tab-size: 2;
  tab-size: 2;

  -webkit-hypens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

pre[class*="language-"] {
  padding: calc(2 * var(#{$universal-padding-var}));
  overflow: auto;
  margin: var(#{$universal-margin-var}) 0;
}


pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
  background: #b3d4fc;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
  background: #b3d4fc;
}

:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
  white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #7a8490;
}

.token.punctuation {
  color: #666;
}

.namespace {
  opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.constant,
.token.symbol,
.token.deleted,
.token.function {
  color: #005cc5;
}


.token.number,
.token.class-name {
  color: #832ed2;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #067e36;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.atrule,
.token.attr-value,
.token.keyword {
  color: #d73a49;
}

.token.regex {
  color: #097cab;
}
.token.important,
.token.variable {
  color: #e90;
}

.token.important,
.token.bold {
  font-weight: bold;
}
.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

button.scroll-to-top {
  border-radius: 100%;
  font-size: 1.5rem;
  line-height: 1;
  box-sizing: border-box;
  width: 2.75rem;
  height: 2.75rem;
  position: fixed;
  bottom: 1rem;
  right: 2rem;
  background: var(#{$back-color-var});
  box-shadow: 0 .25rem .25rem 0 rgba(0,0,0,0.125),0 .125rem .125rem -.125rem rgba(0,0,0,0.25);
  &:hover, &:focus {
    background: var(#{$secondary-back-color-var});
  }
}

.#{$card-name}#disclaimer {
  position: fixed;
  bottom: 0;
  z-index: 1100;
  max-width: 100vw;
  width: 100vw;
  left: 0;
  text-align: center;
  font-size: 1.5rem;
  margin: 0;
  @media screen and (min-width: 768px){
    width: 60vw;
    left: 20vw;
    bottom: 1rem;
  }
  @media screen and (min-width: 1280px){
    width: 40vw;
    left: 30vw;
    bottom: 1.5rem;
  }
}

button#disclaimer-close{
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  font-size: 0.85rem;
  background: 0;
}

// New styles for landing page

#splash {
  height: auto;
  padding-bottom: 1.5rem;
  background: linear-gradient(
    135deg,
    rgba(255, 174, 39, 1) 0%,
    rgba(222, 73, 109, 1) 100%
  );
  #logo {
    margin-top: 0;
    margin-left: -0.5rem;
    padding-top: 2rem;
    text-align: center;
    font-size: 2.25rem;
    line-height: 2;
    img {
      vertical-align: top;
      height: 4.5rem;
    }
  }
  #tagline {
    text-align: center;
    padding: 0.5rem 25%;
  }
  #doc-link {
    text-align: center;
    margin-left: -0.5rem;
    > a {
      background: transparent;
      border: 0.0625rem solid rgba(17, 17, 17, 0.95);
      transition: all 0.3s;
      &:hover,
      &:focus {
        background: rgba(17, 17, 17, 0.95);
        color: #e86957;
      }
    }
  }
  @media screen and (max-width: 767px) {
    #logo {
      font-size: 1.75rem;
      img {
        height: 3.5rem;
      }
    }
    #tagline {
      padding: 0.25rem 17.5%;
      font-size: 0.875rem;
    }
    #doc-link {
      font-size: 0.875rem;
    }
  }
  @media screen and (max-width: 383px) {
    #logo {
      font-size: 1.5rem;
      img {
        height: 3rem;
      }
    }
    #tagline {
      padding: 0.125rem 5%;
    }
  }
  @media screen and (max-width: 479px) {
    #tagline #tagline-lg {
      display: none;
    }
  }
}

@media screen and (min-width: 768px) {
  .col-md-offset-1 {
    margin-left: 8.33333%;
  }
}

@media screen and (min-width: 1280px) {
  .col-lg-offset-2 {
    margin-left: 16.66667%;
  }
}

h2.index-section {
  border-left: 0.3125rem solid #de4a6d;
  padding-left: 0.625rem;
  margin-top: 2rem;
}

#license-icon {
  text-align: center;
  @media screen and (min-width: 768px) {
    position: relative;
    top: calc(50% - 40px);
  }
  > svg {
    border: 0.03125rem solid #444;
    border-radius: 100%;
    padding: 0.5rem;
    fill: #444;
  }
}

#license {
  vertical-align: middle;
}

.no-padding {
  padding: 0;
}

#in-numbers {
  background: #111; //#3f88c5; //#e15554;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #fff;
  svg {
    fill: #fff;
    @media screen and (min-width: 768px) {
      position: relative;
      top: 20px;
      left: -34px;
      width: 32px;
      height: 32px;
    }
  }
  p {
    overflow-wrap: break-word;
    @media screen and (min-width: 768px) {
      position: relative;
      top: -24px;
      left: 22px;
      font-size: 0.75rem;
    }
    margin-top: 0;
    font-size: 0.625rem;
    margin-bottom: 0;
  }
}

#snippet-count,
#contrib-count,
#commit-count,
#star-count {
  font-size: 1rem;
  @media screen and (min-width: 768px) {
    font-size: 1.25rem;
  }
}

ul#links {
  list-style: none;
  padding-left: 0;
  li + li {
    padding-top: 0.625rem;
  }
}

.pick:not(.selected) {
  display: none;
}

.card.pick {
  transition: all 0.6s;
  left: 0;
}

.card.pick + .card.pick {
  margin-top: 0.5rem;
}

.pick.selected {
  overflow: visible;
  button.next {
    position: absolute;
    top: 50%;
    right: -1rem;
    > svg {
      margin-right: -0.0625rem;
    }
  }
}

#pick-slider {
  position: relative;
}

button.previous {
  left: -1%;
  > svg {
    margin-left: -0.125rem;
  }
}
button.next {
  right: -1%;
  > svg {
    margin-left: 0.0625rem;
  }
}

button.previous,
button.next {
  position: absolute;
  top: 50%;
  border-radius: 100%;
  background: #f8f8f8;
  border: 0.03125rem solid #ddd;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  margin: 0;
  transition: all 0.3s;
  z-index: 2000;
  > svg {
    fill: #888;
    transition: all 0.3s;
  }
  &:hover,
  &:focus {
    border-color: #aaa;
    > svg {
      fill: #444;
    }
  }
}

.card.contributor {
  height: calc(100% - 1rem);
  justify-content: left;
  > .section.media {
    height: auto;
  }
  > .section.button {
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    transition: color 0.3s;
    &:hover,
    &:focus {
      color: var(--a-l-col);
      background: #f8f8f8;
    }
  }
}

.card.fluid.contribution-guideline {
  overflow: visible;
  margin-top: 3rem;
  padding-bottom: 0.25rem;
  h3 {
    padding-top: 0.5rem;
    text-align: center;
  }
}

.contribution-guideline + .contribution-guideline {
  &:before,
  &:after {
    content: "";
    position: relative;
    top: -2.75rem;
    width: 0.375rem;
    height: 0.375rem;
    background: #ddd;
    border: 0.03125rem solid #d0d0d0;
    border-radius: 100%;
    left: calc(50% - 0.1875rem);
    box-shadow: inset -0.03125rem -0.03125rem 0.03125rem rgba(0, 0, 0, 0.05);
  }
  &:after {
    position: absolute;
    top: - 1.875rem;
  }
}

.contribution-number {
  position: absolute;
  top: -1.125rem;
  left: calc(50% - 1.125rem);
  font-size: 1.5rem;
  background: linear-gradient(
    135deg,
    rgba(255, 174, 39, 1) 0%,
    rgba(222, 73, 109, 1) 100%
  );
  border: 0.03125 solid #ddd;
  width: 2.25rem;
  text-align: center;
  height: 2.25rem;
  border-radius: 100%;
  font-weight: 700;
  color: #fff;
}

body {
  overflow-x: hidden;
}

label.button.drawer-toggle {
  background: transparent;
  color: #111;
  &:hover, &:focus {
    background: transparent;
  }
}

nav .input-group.vertical {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f8f8f8;
  border-bottom: 0.0625rem solid var(--nv-br-col);
}