//////////////////////////////
// THEME / VARIABLES / BUTTONS
//////////////////////////////


@import '_variables.anchors';
@import '_variables.borders';
@import '_variables.modular-scale';
@import '_variables.sizing';


// Background color (inverse listed first for use with non-inverse in dark mode)
$bg-color-button-inverse-primary: $lighter-gray;                                    // Background-color for inverse primary button

$bg-color-button-inverse-primary-hover: $white;                                     // Background-color for inverse secondary and tertiary buttons on hover

$bg-color-button-inverse-secondary: transparent;                                    // Background-color for inverse secondary button
$bg-color-button-inverse-tertiary: transparent;                                     // Background-color for inverse tertiary button

$bg-color-button-inverse-secondary-tertiary-hover: fade-out($white, .93);           // Background-color for inverse secondary and tertiary buttons on hover

$bg-color-button-primary-light-mode: $color-link-light-mode;                        // Background-color for primary button in light mode
$bg-color-button-primary-dark-mode: $bg-color-button-inverse-primary;               // Background-color for primary button in dark mode

$bg-color-button-primary-hover-light-mode: $color-hover-light-mode;                 // Background-color for primary button on hover in light mode
$bg-color-button-primary-hover-dark-mode: $bg-color-button-inverse-primary-hover;   // Background-color for primary button on hover in dark mode

$bg-color-button-secondary-light-mode: $white;                                      // Background-color for secondary button in light mode
$bg-color-button-secondary-dark-mode: $bg-color-button-inverse-secondary;           // Background-color for secondary button in dark mode

$bg-color-button-tertiary-light-mode: transparent;                                  // Background-color for tertiary button in light mode
$bg-color-button-tertiary-dark-mode: transparent;                                   // Background-color for tertiary button in dark mode

$bg-color-button-secondary-tertiary-hover-light-mode: fade-out($color-hover-light-mode, .93);             // Background-color for secondary and tertiary buttons on hover in light mode
$bg-color-button-secondary-tertiary-hover-dark-mode: $bg-color-button-inverse-secondary-tertiary-hover;   // Background-color for secondary and tertiary buttons on hover in dark mode


// Border radius
$border-radius-button-roundrect: true;    // Button border-radius roundrect? True/false


// Border color (inverse listed first for use with non-inverse in dark mode)
$border-color-button-inverse-primary: $bg-color-button-inverse-primary;                   // Border-color for inverse primary button

$border-color-button-inverse-primary-hover: $bg-color-button-inverse-primary-hover;       // Border-color for inverse primary button on hover

$border-color-button-primary-light-mode: $bg-color-button-primary-light-mode;             // Border-color for primary button in light mode
$border-color-button-primary-dark-mode: $border-color-button-inverse-primary;             // Border-color for primary button in dark mode

$border-color-button-primary-hover-light-mode: $bg-color-button-primary-hover-light-mode; // Border-color for primary button in light mode
$border-color-button-primary-hover-dark-mode: $bg-color-button-inverse-primary-hover;     // Border-color for primary button in dark mode

$border-color-button-secondary: currentColor;                                             // Border-color for secondary button in light mode
$border-color-button-tertiary: transparent;                                               // Border-color for tertiary button in light mode


// Border style
$border-style-button: solid;              // Button border-style


// Border width
$border-width-button: 2px;                // Button border-width


// Color (inverse listed first for use with non-inverse in dark mode)
$color-button-inverse-primary: $color-link-light-mode;                                              // Color (text) for inverse primary button
$color-button-inverse-secondary: $bg-color-button-inverse-primary;                                  // Color (text) for inverse secondary button
$color-button-inverse-tertiary: $bg-color-button-inverse-primary;                                   // Color (text) for inverse tertiary button

$color-button-inverse-secondary-tertiary-hover: $bg-color-button-inverse-primary-hover;             // Color (text) for inverse secondary and tertiary buttons on hover

$color-button-primary-light-mode: $white;                                                           // Color (text) for primary button in light mode
$color-button-primary-dark-mode: $color-button-inverse-primary;                                     // Color (text) for primary button in dark mode

$color-button-secondary-light-mode: $color-link-light-mode;	                                        // Color (text) for secondary button in light mode
$color-button-secondary-dark-mode: $color-button-inverse-secondary;                                 // Color (text) for secondary button in dark mode

$color-button-tertiary-light-mode: $color-link-light-mode;                                          // Color (text) for tertiary button in light mode
$color-button-tertiary-dark-mode: $color-button-inverse-tertiary;                                   // Color (text) for tertiary button in dark mode

$color-button-secondary-tertiary-hover-light-mode: $color-hover-light-mode;                         // Color (text) for secondary and tertiary buttons on hover
$color-button-secondary-tertiary-hover-dark-mode: $color-button-inverse-secondary-tertiary-hover;   // Color (text) for secondary and tertiary buttons on hover


// Font size
$font-size-button: #{ms(-1)}em;           // Button font-size: .84em


// Font weight
$font-weight-button-bold: true;           // Bold button text? True/false


// Line height
$line-height-button: #{ms(3)};            // Button line-height


// Padding
$padding-bottom-button: $length-em-3;     // Padding-bottom of button: .75em
$padding-left-button: $length-em-4;       // Padding-left of button: 1em
$padding-right-button: $length-em-4;      // Padding-right of button: 1em
$padding-top-button: $length-em-3;        // Padding-top of button: .75em


// Text transform
$text-transform-button-uppercase: false;  // Uppercase button text? True/false