//  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
*/
@import 'core';
@import 'layout';

/*
  Custom elements for card elements.
*/
$card-small-name:              'small';            // Class name for small cards.
$card-small-width:             240px;              // Width for small cards.
@include make-card-alt-size ($card-small-name, $card-small-width);

$card-large-name:              'large';            // Class name for large cards.
$card-large-width:             480px;              // Width for large cards.
@include make-card-alt-size ($card-large-name, $card-large-width);

$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-warning-name:            'warning';          // Class name for card warnging color variant.
$card-warning-back-color:      #ffca28;            // Background color for card warnging color variant.
$card-warning-fore-color:      #111;               // Text color for card warnging color variant.
$card-warning-border-color:    #e8b825;            // Border style for card warnging color variant.
@include make-card-alt-color ($card-warning-name, $card-warning-back-color, $card-warning-fore-color, $card-warning-border-color);

$card-error-name:              'error';            // Class name for card error color variant.
$card-error-back-color:        #b71c1c;            // Background color for card error color variant.
$card-error-fore-color:        #f8f8f8;            // Text color for card error color variant.
$card-error-border-color:      #a71a1a;            // Border style for card error color variant.
@include make-card-alt-color ($card-error-name, $card-error-back-color, $card-error-fore-color, $card-error-border-color);

$card-section-dark-name:        'dark';            // Class name for card dark section variant.
$card-section-dark-back-color:  #e0e0e0;           // Background color for card dark section variant.
$card-section-dark-fore-color:  #111;              // Text color for card dark section variant.
@include make-card-section-alt-color ($card-section-dark-name, $card-section-dark-back-color, $card-section-dark-fore-color);

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

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

$button-secondary-name:            'secondary'; // Class name for secondary button color variant.
$button-secondary-back-color:      #d32f2f;     // Background color for secondary button color variant.
$button-secondary-hover-back-color:#c62828;     // Background color for secondary button color variant (hover).
$button-secondary-fore-color:      #f8f8f8;     // Text color for secondary button color variant.
@include make-button-alt-color ($button-secondary-name, $button-secondary-back-color, $button-secondary-hover-back-color, $button-secondary-fore-color);

$button-tertiary-name:            'tertiary';  // Class name for tertiary button color variant.
$button-tertiary-back-color:      #308732;     // Background color for tertiary button color variant.
$button-tertiary-hover-back-color:#277529;     // Background color for tertiary button color variant (hover).
$button-tertiary-fore-color:      #f8f8f8;     // Text color for tertiary button color variant.
@include make-button-alt-color ($button-tertiary-name, $button-tertiary-back-color, $button-tertiary-hover-back-color, $button-tertiary-fore-color);

$button-inverse-name:            'inverse';   // Class name for inverse button color variant.
$button-inverse-back-color:      #212121;     // Background color for inverse button color variant.
$button-inverse-hover-back-color:#111;        // Background color for inverse button color variant (hover).
$button-inverse-fore-color:      #f8f8f8;     // Text color for inverse button color variant.
@include make-button-alt-color ($button-inverse-name, $button-inverse-back-color, $button-inverse-hover-back-color, $button-inverse-fore-color);

$button-small-name:    'small';              // Class name, padding and margin for small button size variant.
$button-small-padding: calc(0.5 * var(#{$universal-padding-var})) calc(0.75 * var(#{$universal-padding-var}));
$button-small-margin:  var(#{$universal-margin-var});
@include make-button-alt-size ($button-small-name, $button-small-padding, $button-small-margin);

$button-large-name:    'large';              // Class name, padding and margin for large button size variant.
$button-large-padding: calc(1.5 * var(#{$universal-padding-var})) calc(2 * var(#{$universal-padding-var}));
$button-large-margin:  var(#{$universal-margin-var});
@include make-button-alt-size ($button-large-name, $button-large-padding, $button-large-margin);


$_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: 'Poppins', -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: 'Inconsolata', Menlo, Consolas, monospace !important;
 }
code, kbd { font-size: 1em; }
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: 1rem; 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;
  font-style: italic;
  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 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.125), 0 0.125rem 0.125rem -0.125rem rgba(0, 0, 0, 0.25);
}

main {
  padding: 0;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  background: none !important;
}

div.collapse {
  > label {
    border-top-left-radius: var(--universal-border-radius) !important;
    border-top-right-radius: var(--universal-border-radius) !important;
  }
  margin: 0;
  width: 100%;
  > div {
    padding: 0 !important;
    > pre {
      margin: 0;
      border: 0;
    }
  }
}

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