/*******************************
     User Global Variables
*******************************/

@teal: @primary_color;
@red: #ff5b55;
@primaryColor: @primary_color;
@defaultBorderRadius: 8px;
// The Element theme has only two colors: positive and negative
@positiveColor: @primary_color;
@negativeColor: @red;

// We don't want a min-width, as we display the widget inside very narrow iframes.
@pageMinWidth: auto;

// the theme will be scoped with `.dark { ... }` during build, which doesn't support font imports.
// Fonts are loaded by the `default` theme.
@importGoogleFonts: false;

/*** Dark Theme */

@pageBackground: #20252b;
@pageBackgroundModal: #15191e;

/*-------------------
     Neutral Text
--------------------*/

@textColor: rgb(255, 255, 255);

@darkTextColor               : rgba(255, 255, 255, 0.85);
@mutedTextColor              : rgba(255, 255, 255, 0.6);
@lightTextColor              : rgba(255, 255, 255, 0.4);

@unselectedTextColor         : rgba(255, 255, 255, 0.4);
@hoveredTextColor            : rgba(255, 255, 255, 0.8);
@pressedTextColor            : rgba(255, 255, 255, 0.9);
@selectedTextColor           : rgba(255, 255, 255, 0.95);
@disabledTextColor           : rgba(255, 255, 255, 0.2);

@invertedTextColor           : rgba(0, 0, 0, 0.9);
@invertedMutedTextColor      : rgba(0, 0, 0, 0.8);
@invertedLightTextColor      : rgba(0, 0, 0, 0.7);
@invertedUnselectedTextColor : rgba(0, 0, 0, 0.5);
@invertedHoveredTextColor    : rgba(0, 0, 0, 1);
@invertedPressedTextColor    : rgba(0, 0, 0, 1);
@invertedSelectedTextColor   : rgba(0, 0, 0, 1);
@invertedDisabledTextColor   : rgba(0, 0, 0, 0.2);

/* Links */
@linkColor: darken(@blue, 10);
@linkHoverColor: darken(@blue, 5);
@linkHoverUnderline: none;

/*-------------------
      Borders
--------------------*/

@circularRadius                : 500rem;

@borderColor               : lighten(@pageBackground, 10);
@strongBorderColor         : lighten(@pageBackground, 10);
@internalBorderColor       : lighten(@pageBackground, 5);
@selectedBorderColor       : rgb(35, 140, 245);
@strongSelectedBorderColor : rgba(34, 36, 38, 0.5);
@disabledBorderColor       : rgba(34, 36, 38, 0.5);

@solidInternalBorderColor  : lighten(@pageBackground, 5);
@solidBorderColor          : lighten(@pageBackground, 10);
@solidSelectedBorderColor  : rgb(35, 140, 245);

@whiteBorderColor              : rgba(255, 255, 255, 0.1);
@selectedWhiteBorderColor      : rgba(255, 255, 255, 0.8);

@solidWhiteBorderColor         : #555555;
@selectedSolidWhiteBorderColor : #999999;

/*-------------------
       Accents
--------------------*/

@floatingShadow:
  0px 2px 4px 0px rgba(0, 0, 0, 0.12),
  0px 2px 10px 0px rgba(0, 0, 0, 0.15)
;


/*--------------
   Form Input
---------------*/

/* This adjusts the default form input across all elements */
@inputBackground        : rgb(21, 25, 30);
@inputVerticalPadding   : @relative11px;
@inputHorizontalPadding : @relative14px;
@inputPadding           : @inputVerticalPadding @inputHorizontalPadding;

/* Input Text Color */
@inputColor: rgb(255, 255, 255);
@inputPlaceholderColor: darken(@inputColor, 75);
@inputPlaceholderFocusColor: darken(@inputColor, 45);

/*-------------------
    Focused Input
--------------------*/

/* Used on inputs, textarea etc */
@focusedFormBorderColor: rgb(35, 140, 245);

/* Used on dropdowns, other larger blocks */
@focusedFormMutedBorderColor: rgb(35, 140, 245);

/* **/

/*-------------------
    Derived Values
--------------------*/


@errorBackgroundColor : darken(@red, 36);
@errorBorderColor : darken(@red, 30);
@errorTextColor: lighten(@red, 40);
@errorHeaderColor: lighten(@red, 40);

@negativeBackgroundColor : darken(@red, 36);
@negativeBorderColor : darken(@red, 30);
@negativeTextColor: lighten(@red, 40);
@negativeHeaderColor: lighten(@red, 40);

@infoBackgroundColor : darken(@blue, 36);
@infoBorderColor : darken(@blue, 30);
@infoTextColor : lighten(@blue, 40);
@infoHeaderColor : lighten(@blue, 40);

@warningBackgroundColor : darken(@yellow, 36);
@warningBorderColor : darken(@yellow, 30);
@warningTextColor : lighten(@yellow, 40);
@warningHeaderColor : lighten(@yellow, 40);

@successBackgroundColor : darken(@green, 36);
@successBorderColor : darken(@green, 30);
@successTextColor : lighten(@green, 40);
@successHeaderColor : lighten(@green, 40);

// We don't want to load fonts from the Google CDN for privacy reasons and do it
// manually instead
@importGoogleFonts: false;