// stylelint-disable scss/dollar-variable-colon-space-after
// Variables
// =============================================================================

// Theme version
$pma-theme-version: "1.1.0";

// PMA color system
// -----------------------------------------------------------------------------
$white:             #fff;
$black:             #000;
$pma-gray-100:      #f8f9fa;
$pma-gray-200:      #e9ecef;
$pma-gray-300:      #dee2e6;
$pma-gray-400:      #ced4da;
$pma-gray-500:      #adb5bd;
$pma-gray-600:      #6c757d;
$pma-gray-700:      #495057;
$pma-gray-800:      #343a40;
$pma-gray-900:      #212529;
$pma-gray-100-rgb:  248, 249, 250;
$pma-gray-200-rgb:  233, 236, 239;
$pma-gray-300-rgb:  222, 226, 230;
$pma-gray-400-rgb:  206, 212, 218;
$pma-gray-500-rgb:  173, 181, 189;
$pma-gray-600-rgb:  108, 117, 125;
$pma-gray-700-rgb:  73, 80, 87;
$pma-gray-800-rgb:  52, 58, 64;
$pma-gray-900-rgb:  33, 37, 41;
$pma-blue:          #0d6efd;
$pma-indigo:        #6610f2;
$pma-purple:        #6f42c1;
$pma-pink:          #d63384;
$pma-red:           #dc3545;
$pma-orange:        #fd7e14;
$pma-yellow:        #ffc107;
$pma-green:         #198754;
$pma-teal:          #20c997;
$pma-cyan:          #0dcaf0;
$pma-nord:          #88c0d0;

// Theme Colors
$pma-theme-colors: (
  "white":    $white,
  "black":    $black,
  "gray-100": $pma-gray-100,
  "gray-200": $pma-gray-200,
  "gray-300": $pma-gray-300,
  "gray-400": $pma-gray-400,
  "gray-500": $pma-gray-500,
  "gray-600": $pma-gray-600,
  "gray-700": $pma-gray-700,
  "gray-800": $pma-gray-800,
  "gray-900": $pma-gray-900,
  "blue":     $pma-blue,
  "indigo":   $pma-indigo,
  "purple":   $pma-purple,
  "pink":     $pma-pink,
  "red":      $pma-red,
  "orange":   $pma-orange,
  "yellow":   $pma-yellow,
  "green":    $pma-green,
  "teal":     $pma-teal,
  "cyan":     $pma-cyan,
  "nord":     $pma-nord
);

// Theme color scheme
// Values: "cyan", "teal", "nord", "orange"
// Default: "cyan"
// Set this value for the desired color scheme
$color-scheme: cyan !default;
$pma-color-scheme: $pma-cyan;

@if $color-scheme == teal {
  $pma-color-scheme: $pma-teal;
} @else if $color-scheme == nord {
  $pma-color-scheme: $pma-nord;
} @else if $color-scheme == orange {
  $pma-color-scheme: $pma-orange;
}

// PMA Base Style
// -----------------------------------------------------------------------------
$pma-primary:                 $pma-color-scheme;
$pma-body-color:              $white;
$pma-body-bg:                 $pma-gray-900;
$pma-component-bg:            $pma-gray-800;
$pma-component-hover-bg:      $pma-gray-600;
$pma-component-active-color:  $black;
$pma-component-active-bg:     $pma-primary;
$pma-table-bg:                $pma-gray-700;
$pma-form-border-color:       $pma-gray-900;
$pma-selected-bg:             $pma-gray-700;
$pma-fieldset-color:          $pma-gray-300;
$pma-fieldset-bg:             $pma-gray-600;
$pma-border-color:            $pma-gray-600;
$pma-disable-color:           $pma-gray-500;
$pma-cond-border-color:       $black;
$pma-button-color:            $pma-primary;
$pma-link-color:              $pma-primary;
$pma-link-hover-color:        $pma-red;
$pma-custom-color:            $pma-orange;

// Bootstrap variables
// -----------------------------------------------------------------------------
// Color system
$primary:                     $pma-primary;
$secondary:                   $pma-gray-700;
$light:                       $pma-gray-800;
// Options
// Gradient
// Spacing
// Position
// Body
$body-color:                  $pma-body-color;
$body-bg:                     $pma-body-bg;
// Utilities maps
// Links
$link-color:                  $pma-body-color;
// Paragraphs
// Grid breakpoints
// Grid containers
// Grid columns
// Container padding
// Components
$border-color:                $pma-border-color;
// Typography
$text-muted:                  $pma-gray-400;
// Tables
$table-color:                 $pma-body-color;
$table-bg:                    $pma-component-bg;
$table-accent-bg:             transparent;
$table-striped-color:         $table-color;
$table-striped-bg:            rgba($pma-body-bg, .6);
$table-active-color:          $table-color;
$table-active-bg:             rgba($pma-body-bg, .7);
$table-hover-color:           $table-color;
$table-hover-bg:              rgba($pma-body-bg, .8);
$table-border-color:          $pma-form-border-color;
$table-group-separator-color: $pma-border-color;
// Buttons + Forms
// Buttons
// Forms
$input-bg:                    darken($pma-component-bg, 2.5%);
$input-disabled-bg:           $pma-gray-600;
$input-border-color:          $pma-form-border-color;
$input-placeholder-color:     $pma-gray-400;
$input-group-addon-bg:        $pma-component-bg;
$form-check-input-border:     1px solid rgba($pma-body-color, .4);
$form-select-indicator-color: $pma-body-color;
$form-switch-color:           rgba($pma-body-color, .75);
$form-file-button-color:      color-contrast($pma-gray-900);
$form-file-button-bg:         $pma-gray-900;
$form-file-button-hover-bg:   $pma-primary;
// Form validation
// Z-index master list
// Nav Tabs
$nav-tabs-bg:                       rgba($pma-body-bg, .5);
$nav-tabs-border-color:             rgba($pma-body-bg, .5);
$nav-tabs-border-width:             0;
$nav-tabs-link-hover-border-color:  transparent;
$nav-tabs-link-active-color:        $pma-component-active-color;
$nav-tabs-link-active-bg:           $pma-component-active-bg;
$nav-tabs-link-active-border-color: rgba($pma-body-bg, .5);
// Nav Pills
$nav-pills-bg:                      $pma-body-bg;
$nav-pills-link-active-color:       $pma-component-active-color;
$nav-pills-link-active-bg:          $pma-component-active-bg;
// Navbar
$navbar-light-color:                $white;
$navbar-light-hover-color:          rgba($white, .65);
$navbar-light-active-color:         $white;
$navbar-light-disabled-color:       rgba($white, .25);
$navbar-light-toggler-focus-bg:     $pma-body-bg;
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);
$navbar-light-brand-color:          $navbar-light-active-color;
$navbar-light-brand-hover-color:    $navbar-light-active-color;
$navbar-dark-color:                 rgba($black, .55);
$navbar-dark-hover-color:           rgba($black, .7);
$navbar-dark-active-color:          rgba($black, .9);
$navbar-dark-disabled-color:        rgba($black, .3);
$navbar-dark-toggler-focus-bg:      $pma-body-bg;
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color:  rgba($white, .1);
$navbar-dark-brand-color:           $navbar-dark-active-color;
$navbar-dark-brand-hover-color:     $navbar-dark-active-color;
$nav-item-border-radius:            .375rem;
// Dropdowns
$dropdown-color:              $pma-body-color;
$dropdown-bg:                 $pma-body-bg;
$dropdown-link-color:         $dropdown-color;
$dropdown-link-hover-color:   $pma-body-color;
$dropdown-link-hover-bg:      rgba($pma-body-color, .15);
// Pagination
$pagination-bg:                    $pma-body-bg;
$pagination-border-color:          $pma-border-color;
$pagination-focus-bg:              $pma-body-bg;
$pagination-hover-color:           $white;
$pagination-hover-bg:              $pma-blue;
$pagination-hover-border-color:    $pagination-hover-bg;
$pagination-active-color:          $white;
$pagination-active-bg:             $pma-blue;
$pagination-active-border-color:   $pagination-active-bg;
$pagination-disabled-color:        $pma-disable-color;
$pagination-disabled-bg:           $pma-component-bg;
$pagination-disabled-border-color: $pma-border-color;
// Placeholders
// Cards
$card-border-color:           rgba($pma-body-bg, .5);
$card-cap-bg:                 rgba($pma-body-bg, .5);
$card-bg:                     $pma-component-bg;
// Accordion
$accordion-bg:                  $pma-component-bg;
$accordion-button-bg:           darken($pma-component-bg, 2.5%);
$accordion-button-active-bg:    darken($pma-component-bg, 3.5%);
$accordion-button-active-color: $pma-body-color;
$accordion-border-color:        $pma-form-border-color;
// Tooltips
// Popovers
// Toasts
// Badges
// Modals
$modal-content-bg:            lighten($pma-gray-800, 5%);
// Alerts
// Progress bars
// List group
$list-group-color:            $pma-body-color;
$list-group-bg:               $pma-component-bg;
$list-group-border-color:     lighten($pma-form-border-color, 5%);
// Image thumbnails
// Figures
// Breadcrumbs
// Carousel
// Spinners
// Close
$btn-close-color:             $pma-body-color;
// Offcanvas
// Code

// PMA variables
// -----------------------------------------------------------------------------

// Common
$pma-ajax-shadow:             #888;
$pma-ajax-spacer:             8px;
$pma-ajax-width:              350px;
$pma-ajax-bg-zise:            24px;
$pma-confirmation-color:      $black;
$pma-confirmation-bg:         $pma-pink;
$selflink-border-color:       $pma-border-color;

// Navigation
$navigation-width:            240px;
$navigation-color:            $pma-body-color;
$navigation-bg:               $pma-component-bg;
$navigation-selected-bg:      $pma-selected-bg;
$navigation-border-color:     $pma-border-color;
$navigation-shadow-color:     $pma-border-color;
$navigation-drop-button-bg:   $pma-border-color;
$navigation-resizer-hover-bg: $pma-button-color;

// Breadcrumbs
$breadcrumb-navbar-padding:       .5rem;
$breadcrumb-navbar-padding-y:     .5rem;
$breadcrumb-navbar-padding-x:     3rem;
$breadcrumb-navbar-margin-bottom: 0;
$breadcrumb-navbar-bg:            $pma-component-bg;

// Buttons
$btn-outline-secondary:       $pma-gray-400;

// Modals
$modal-cap-bg:                rgba($pma-body-bg, .5);

// Console
$console-color:               $pma-body-color;
$console-toolbar-bg:          $pma-component-bg;
$console-content-bg:          $pma-body-bg;
$console-message-bg:          $pma-component-bg;
$console-message-text-bg:     $pma-gray-700;

// CodeMirror
$codemirror-bg:               $pma-component-bg;
$codemirror-color:            $pma-body-color;
$codemirror-gutters:          $pma-gray-700;