/* DO NOT USE - THIS IS A FLAVOR BUILT FOR THE DOCUMENTATION AND CONTAINS A LOT OF EXTRA CODE!!! */

@import '../mini/core';
@import '../mini/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 '../mini/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);

@import '../mini/navigation';
@import '../mini/table';
@import '../mini/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);

@import '../mini/progress';

/*
  Custom elements for progress bars and spinners.
*/
$progress-primary-name:         'primary';   // Class name for primary <progress> color variant.
$progress-primary-fore-color:   #1976d2;     // Foreground color for primary <progress> color variant.
@include make-progress-alt-color ($progress-primary-name, $progress-primary-fore-color);

$progress-secondary-name:     'secondary';   // Class name for secondary <progress> color variant.
$progress-secondary-fore-color: #d32f2f;     // Foreground color for secondary <progress> color variant.
@include make-progress-alt-color ($progress-secondary-name, $progress-secondary-fore-color);

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

$spinner-donut-primary-name:         'primary';   // Class name for primary spinner donutcolor variant.
$spinner-donut-primary-fore-color:   #1976d2;     // Foreground color for primary spinner donut color variant.
@include make-spinner-donut-alt-color ($spinner-donut-primary-name, $spinner-donut-primary-fore-color);

$spinner-donut-secondary-name:     'secondary';   // Class name for secondary spinner donut color variant.
$spinner-donut-secondary-fore-color: #d32f2f;     // Foreground color for secondary spinner donut color variant.
@include make-spinner-donut-alt-color ($spinner-donut-secondary-name, $spinner-donut-secondary-fore-color);

$spinner-donut-tertiary-name:       'tertiary';   // Class name for tertiary spinner donut color variant.
$spinner-donut-tertiary-fore-color:   #308732;    // Foreground color for tertiary spinner donut color variant.
@include make-spinner-donut-alt-color ($spinner-donut-tertiary-name, $spinner-donut-tertiary-fore-color);

@import '../mini/icon';
@import '../mini/utility';

// Custom elements for his flavor.

:not(.doc) {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;
}

code:not(.doc), kbd:not(.doc), pre:not(.doc), samp:not(.doc) {
    font-family: 'Inconsolata', Menlo, Consolas, monospace;
}

.index-splash {
  width: 100%;
  height: 100vh;
}
.index-splash-image {
  background-image: url('./index-splash.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  &:not(.no-filter){
    filter: blur(2px);
  }
}

h1.splash {
  position: absolute;
  margin: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  line-height: 60vh;
  font-size: 3rem;
  font-weight: 400;
  color: #f22f21;
  //color: #ef2917;
  & small {
    display: initial;
    font-size: 0.5em;
    color: #222;
  }
  &::first-letter {
    font-size: 1.33em;
    color: #fff;
    background: #f22f21;
    border-radius: 6px;
    padding: 0 10px;
  }
}

p.splash {
  margin: 0;
  position: absolute;
  width: 100%;
  text-align: center;
  padding-top: 40vh;
}
.card p:not(.doc), .card li:not(.doc){
  text-align: justify;
}

a.button.splash {
  position: absolute;
  top: 65vh;
  width: 50vw;
  left: 25vw;
  text-align: center;
  font-size: 1.25rem;
  border-color: #f22f21;
  background: rgba(255,255,255,0.35);
  transition: all 0.3s;
  &:hover {
    background: #f22f21;
    color: #f8f8f8;
    border-color: #f22f21;
  }
  @media screen and (min-width: 768px){
    width: 30vw;
    left: 35vw;
  }
  @media screen and (min-width: 1280px){
    width: 25vw;
    left: 37.5vw;
  }
}

#version-info {
  position: absolute;
  bottom: 0;
  background: rgba(0,0,0,0.25);
  padding: 2px 6px;
  border-radius: 4px;
  color: #dc2b1e;
  right: 8px;
  font-weight: 500;
}

.row.padded {
  padding-top: 20px;
  padding-bottom: 80px;
}

.feature-image {
  display: block;
  margin: 50px auto 20px;
  @media screen and (min-width: 768px){
    height: 400px;
  }
}

.feature-header {
  text-align: center;
  margin-left: 0;
}

.alt-back {
  background: #f3f3f3;
}

.primary-section {
  background: #f22f21;
  color: #fff;
  a {
    &:link{
      color: #76FF03;
    }
    &:visited {
      color: #64DD17;
    }
    &.centered {
      display: block;
      margin: 0 auto;
      text-align: center;
    }
  }
  // TODO: Actually convert to a link, stylize as button, utilize module
  a.button {
    background: transparent;
    border: 1px solid #fff;
    border-radius: 4px;
    padding: 4px 8px;
    color: #fff;
    font-size: 1.25rem;
    display: inline-block;
    margin: 20px auto 8px;
    cursor: pointer;
  }
}

#root, #App {
  height: 100vh;
}

#doc-wrapper {
  height: calc(100vh - 3.5625rem);
  overflow: hidden;
}

#doc-drawer {
  height: 100vh;
  overflow-y: auto;
  @media screen and (min-width:768px){
    height: 100%;
    border-top: 0;
    border-bottom: 0;
  }
}

#doc-content {
  height: 100%;
  overflow-y: auto;
}

[type="checkbox"].drawer:not(.persistent) + nav {
  border-top: 0;
}


// TODO: Actually add from framework when utility is done.
@media screen and (max-width: 767px) {
  .hidden-sm {
    display: none !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .hidden-md {
    display: none !important;
  }
}

@media screen and (min-width: 1280px) {
  .hidden-lg {
    display: none !important;
  }
}

// Additional styling from custom module: https://github.com/Chalarangelo/mini.css-code-component

$cc-counter-name:               'line' !default;         // Name for the line counter.
$cc-line-name:                  'code-line' !default;    // Class name for code lines.
$cc-code-fonts:'Inconsolata', Menlo, Consolas, monospace;// Fonts used for code. -- Has been customized.
$cc-code-font-size:             0.85rem !default;        // Font size for code.
$cc-padding-left:               3.5rem !default;         // Left padding for code lines.
$cc-number-left:                1.75rem !default;        // Left position of the line numbers. -- Has been customized.
$cc-number-width:               2rem !default;           // Width of the line numbers.
$cc-highlight-a-name:           'highlight-a' !default;  // Class name for highlight A.
$cc-highlight-b-name:           'highlight-b' !default;  // Class name for highlight B.
$cc-highlight-c-name:           'highlight-c' !default;  // Class name for highlight C.
$cc-highlight-a-color:          #4527a0 !default;        // Color for highlight A.
$cc-highlight-b-color:          #1976d2 !default;        // Color for highlight B.
$cc-highlight-c-color:          #388e3c !default;        // Color for highlight C.
// CSS variable name definitions [exercise caution if modifying these]
$cc-padding-left-var:           '--cc-padding-left' !default;
$cc-number-left-var:            '--cc-number-left' !default;
$cc-number-width-var:           '--cc-number-width' !default;
$cc-highlight-a-var:            '--cc-highlight-a-color' !default;
$cc-highlight-b-var:            '--cc-highlight-b-color' !default;
$cc-highlight-c-var:            '--cc-highlight-c-color' !default;
/* Code component CSS variable definitions */
:root {
  #{$cc-padding-left-var}: $cc-padding-left;
  #{$cc-number-left-var}: $cc-number-left;
  #{$cc-number-width-var}: $cc-number-width;
  #{$cc-highlight-a-var}: $cc-highlight-a-color;
  #{$cc-highlight-b-var}: $cc-highlight-b-color;
  #{$cc-highlight-c-var}: $cc-highlight-c-color;
}
pre {
  counter-reset: #{$cc-counter-name};
  & > * {
    font-family: $cc-code-fonts; // Reapply to avoid problems
    font-size: $cc-code-font-size;
  }
  & > .#{$cc-line-name} {
    font-family: $cc-code-fonts; // Reapply to avoid problems
    padding-left: var(#{$cc-padding-left-var});
    &:before {
      background: #eee;     // This was manually applied, it's a bit of a hack!
      counter-increment: #{$cc-counter-name};
      content: counter(#{$cc-counter-name});
      display: inline-block;
      border-right: $__1px solid var(#{$pre-color-var});
      padding: 0 var(#{$universal-padding-var});
      margin-right: var(#{$universal-margin-var});
      color: var(#{$border-color-var});
      position: absolute;
      left: var(#{$cc-number-left-var});
      width: var(#{$cc-number-width-var});
      text-align: right;
    }
    & > * {
      line-height: 0; // Prevent highlights from breaking up the code block.
      font-family: #{$cc-code-fonts}; // Reapply to avoid problems
    }
  }
  .#{$cc-highlight-a-name} {
    color: var(#{$cc-highlight-a-var});
  }
  .#{$cc-highlight-b-name} {
    color: var(#{$cc-highlight-b-var});
  }
  .#{$cc-highlight-c-name} {
    color: var(#{$cc-highlight-c-var});
  }
}

// Custom elements for DOs and DONTs - Possibly use the `contextual` module in the end - TODO


mark.do {
  background: #689f38;
  color: #fafafa;
  font-size: .9375em;
  line-height: 1em;
  border-radius: .125rem;
  padding: 0.125em 0.25em;
}

mark.dont {
  background: #e53935;
  color: #fafafa;
  font-size: .9375em;
  line-height: 1em;
  border-radius: .125rem;
  padding: 0.125em 0.25em;
}

.row.dodos {
  align-items: center;
}

.box-colored {
  background: #0277bd;
  border-radius: 0.125rem;
  padding: 0.875rem;
  margin-bottom: 0.5rem;
  min-height: 0.875rem;
  color: #f8f8f8;
}

main {
  background: #eee;
}

.responsive-label {align-items: center;}
@media (min-width: 768px) { .responsive-label .col-md-3 {text-align: right;}}

#nav-drawer {
  h3 {
    text-align:center;
    @media (min-width: 768px) {
      display:none;
    }
  }
}

main footer {
  position: relative;
  margin-top: 1.5rem;
  left: -0.25rem;
  width: calc(100% - 0.5rem);
}

header.row a span {
  display: none;
  @media (min-width: 768px) {
    display: inline;
  }
}

.codepen-form {
  border: 0;
  padding: 0;
  position: relative;
  height: 0;
  overflow: visible;
}

.codepen-link {
  border-radius: 0.125rem;
  border: 0.0625rem solid #ddd;
  background: #f0f0f0;
  transition: background 0.3s;
  cursor: pointer;
  padding: 0.25rem;
  top: -1.25rem;
  right: -1.25rem;
  position: absolute;
  width: 1.75rem;
  height: 1.75rem;
  &:hover, &:focus {
    background: #fafafa;
  }
}

// I removed this, it seemed unnecessary, but keep it here just in case I want it back in later on?
// header .logo{
//   padding-top: 0.1875rem;
//   &::first-letter {
//     font-size: 1.25em;
//     line-height: 1.25;
//     color: #fff;
//     background: #f22f21;
//     border-radius: 6px;
//     padding: 0 6px;
//   }
// }
@media screen and (max-width: #{$table-mobile-breakpoint - 1px}){
  table.doc {
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    display: flex;
    flex: 0 1 auto;
    flex-flow: row wrap;
    padding: var(#{$universal-padding-var});
    padding-top: 0;
    @if not($_include-horizontal-table) {
      overflow: auto;
      max-height: $table-max-height;
    }
    caption {
      font-size: $table-caption-font-size;
      margin: calc(2 * var(#{$universal-margin-var})) 0;
      max-width: 100%;
      flex: 0 0 100%;
    }
    thead, tbody {
      display: flex;
      flex-flow: row wrap;
      border: $__1px solid var(#{$table-border-color-var});
      @if not($_include-horizontal-table) {
        max-width: 100%;
        flex: 0 0 100%;
      }
    }
    thead {
      z-index: 999;  // Fixes the visibility of the element.
      border-radius: var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0 0;
      border-bottom: $__1px solid var(#{$table-border-separator-color-var});
      @if not($_include-horizontal-table) {
        position: sticky;
        top: 0;
      }
    }
    tbody {
      border-top: 0;
      margin-top: calc(0 - var(#{$universal-margin-var}));
      border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
    }
    tr {
      display: flex;
      padding: 0; // Apply always to overwrite default.
      @if not($_include-horizontal-table) {
        flex-flow: row wrap;
        flex: 0 0 100%;
      }
    }
    th, td {
      padding: calc(2 * var(#{$universal-padding-var}));    // Apply always to overwrite default.
      @if not($_include-horizontal-table) {
        flex: 1 0 0%;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    th {
      text-align: left;
      background: var(#{$table-th-back-color-var});
      color: var(#{$table-th-fore-color-var});
    }
    td {
      background: var(#{$table-td-back-color-var});
      color: var(#{$table-td-fore-color-var});
      border-top: $__1px solid var(#{$table-border-color-var});
    }
    @if not($_include-horizontal-table) {
      tbody tr:first-child td {
        border-top: 0;
      }
    }
  }
  table.#{$table-horizontal-name}.doc {
    border: 0;
    thead, tbody {
      border: 0;
      flex-flow: row nowrap;
    }
    tbody {
      overflow: auto;
      justify-content: space-between;
      flex: 1 0 0;
      margin-left: calc( 4 * var(#{$universal-margin-var}));
      padding-bottom: calc(var(#{$universal-padding-var}) / 4);
    }
    tr {
      flex-direction: column;
      flex: 1 0 auto;
    }
    th, td {
      width: 100%;
      border: 0;
      border-bottom: $__1px solid var(#{$table-border-color-var});
      &:not(:first-child){
        border-top: 0;
      }
    }
    th {
      text-align: right;
      border-left: $__1px solid var(#{$table-border-color-var});
      border-right: $__1px solid var(#{$table-border-separator-color-var});
    }
    thead {
      tr:first-child {
        padding-left: 0;
      }
    }
    th:first-child, td:first-child {
      border-top: $__1px solid var(#{$table-border-color-var});
    }
    tbody tr:last-child td {
      border-right: $__1px solid var(#{$table-border-color-var});
      &:first-child{
        border-top-right-radius: 0.25rem;
      }
      &:last-child{
        border-bottom-right-radius: 0.25rem;
      }
    }
    thead tr:first-child th {
      &:first-child{
        border-top-left-radius: 0.25rem;
      }
      &:last-child{
        border-bottom-left-radius: 0.25rem;
      }
    }
  }
}

table.doc.cardized {
  border-collapse: collapse;
  border: 0;
  width: 100%;
  display: table;
  // Accessibility (element is not visible, but screen readers read it normally)
  thead, th {
    border: 0;
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(100%);
    clip-path: inset(100%);
  }
  tbody {
    display: table-row-group;
    border: 0;
  }
  tr {
    display: block;
    border: $__1px solid var(#{$table-border-color-var});
    border-radius: var(#{$universal-border-radius-var});
    @if $universal-box-shadow != none {
      box-shadow: var(#{$universal-box-shadow-var});
    }
    background: #fafafa;     // use variables, this is a test (body)
    padding: var(#{$universal-padding-var});
    margin: var(#{$universal-margin-var});
    margin-bottom: calc(2 * var(#{$universal-margin-var}));
  }
  td {
    display: block;
    border: 0;
    text-align: right;
  }
  td:before {
    content: attr(#{$table-mobile-card-label});
    float: left;
    font-weight: $table-mobile-label-font-weight;
  }
}

a#feather-banner {
  background: #1976d2;
  color: #f8f8f8;
  font-size: 1.25rem;
  text-align:center;
  transition: background 0.3s;
  &:hover, &:focus {
    text-decoration: none;
    background: #1565c0;
  }
  svg {
    vertical-align: -0.25rem;
    margin-right: 0.5rem;
  }
}

.row.icon-row {
  padding: 0.25rem;
  p {
    margin: 0.125rem;
    padding: 0.25rem;
    text-align: center;
  }
}
