//  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
*/
$_include-modal: false;
$_include-tooltip: false;
$_include-collapse: false;

@import 'core';
@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} > 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}));
}

@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);


$_drawer-right: false;

@import 'navigation';
@import 'contextual';

/*
  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

html, * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;
}
code, pre, kbd, code *, pre *, kbd *, code[class*="language-"], pre[class*="language-"] {
  font-family: Menlo, Consolas, monospace !important;
}
code, kbd {
  font-size: 0.8125em;
}
pre code {
  padding: 0; // Should make the first line's left padding the same as all other lines and avoid that annoying little step.
}
code {
  transform: scale(1);  /* Deals with the issue described in #243 */
}
pre {
  font-size: 0.8125rem;
  border: 0.0625rem solid var(--secondary-border-color);
  border-radius: var(--universal-border-radius);
}
.group{
  position:relative;
  margin-top:2em;
  margin-bottom:1em
}
.search{
  font-size:14px;
  margin-top:-.1em;
  display:block;
  width:100%;
  border:none;
  border-bottom:1px solid var(--nav-link-color);
}
.search:focus{
  outline:none
}
label#search-label{
  color:var(--nav-link-color);
  font-size:18px;
  font-weight:400;
  position:absolute;
  left:5px;
  top:10px;
}
.search:focus ~ label#search-label,.search:valid ~ label#search-label{
  top:-20px;
  font-size:14px;
  color:var(--nav-link-color);
}
label#menu-toggle {
  width: 3.4375rem;
}

header h1.logo {
  margin-top: -0.8rem;
  text-align:center;
  a {
  text-decoration:none;
  color: #111;
  }
}

header #title {
  position:relative;
  top: -1rem;
  @media screen and (max-width: 500px) { font-size: 1rem; display: block }
}

header h1 small {
  display:block;
  font-size: 0.875rem;
  color: #888;
  margin-top: -0.8rem;
  @media screen and (max-width: 768px) { font-size: 0.75rem; }
  @media screen and (max-width: 600px) { font-size: 0.625rem; }
  @media screen and (max-width: 500px) { font-size: 0.5rem; margin-top: -1.2rem; }
}

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

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

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;
  > svg {
    vertical-align: bottom;
  }
}

code[class*="language-"],
pre[class*="language-"] {
  color: black;
  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-"],
pre[class*="language-"] {
  background: #f5f2f0;
}

: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{
  color: #8132b5;
}

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

.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: #007972;
}
.token.important,
.token.variable {
  color: #e90;
}

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

.token.entity {
  cursor: help;
}