@import "theme-template";

// variables

$primary-text-color: darken(#3d3d3d, 10%);
$secondary-text-color: lighten($primary-text-color, 22%);
$inactive-text-color: lighten($primary-text-color, 25%);
$light-text-color: #3d3d3d;
$dark-text-color: lighten($light-text-color, 12%);
$link-text-color: #337ab7;
$error-text-color: #e3745b;

$settings-select-bg: #e5e6e4;
$settings-select-color: #656565;
$settings-api-node-border-color: #e6e6e6;
$main-content-margin-block-bg-color: #f8f9f8;
$bg-color: #fff;
$panel-bg-color: #e5e6e4;
$light-panel-bg-color: #fff;
$super-light-panel-bg-color: darken($light-panel-bg-color, 1%);
$settings-menu-hover-bg: darken($light-panel-bg-color, 10%);
$settings-menu-active-bg: darken($light-panel-bg-color, 10%);
$button-bg-color: #2196f3;
$secondary-button-bg-color: #999999;
$input-background: darken($bg-color, 8%);

$alert-color: $error-text-color;
$info-color: #ce7925;
$success-color: #21d19f;
$warning-color: #f35b92;
$fee-color: #7f055e;

// Exchange colors
$bid-color: #258a14;
$ask-color: #ea340b;
$call-color: #bbbf2b;
$positive-color: #528c0a;
$negative-color: rgba(225, 66, 74, 1);
$row-accent-color: #ffffff;
$header-color: #dcdcdc;

// Account table view colors
$account-header: #eaeaea;
$account-cells: #dadada;
$account-green: #488a00;
$account-primarytext: $primary-text-color;
$account-dimmed: #5d5d5d;
$account-border: rgba(50, 49, 49, 0.1);
$account-background: #e5e6e4;
$account-tabs-background: #d5d6d4;

$pulsate-green-start: $account-green;
$pulsate-green-end: #70c117;
$pulsate-red-start: $negative-color;
$pulsate-red-end: #e87f84;

$modal-bg-color: #dadada;

$positive-color-alternative: #22d173;
$negative-color-alternative: #ff276d;
$medium-color: #ff9900;
$dark-help-text: #171a25;
$separator-line: rgba(23, 26, 37, 0.3);

$mobile-input-bg: $input-background;

$incognito-bg: #ea340b;

$tab-content-background-color: lighten($account-header, 4%);
$explorer-tab-content-background-color: #fff;

// * * * Explorer

// * * * * * Witnesses

$explorer--witnesses--info-bg: transparent;
$explorer--witnesses--info-border: darken($account-header, 6%);
$explorer--witnesses--info-table-title-color: lighten($dark-text-color, 20%);
$explorer--witnesses--info-table-text-color: $dark-text-color;

// * * * * * Assets

$explorer--assets--bg: $bg-color;

// * * *

// * * * * Settings

$settings-label-color: rgba(0, 0, 0, 0.65);

//

// color palette

// branding colors
$primary-color: #337ab7;

// help colors
$white: #fff;
$dark: rgba(0, 0, 0, 0.6);
$dark-1: lighten($dark, 30%);
$dark-2: lighten($dark, 60%);
$dark-3: lighten($dark, 90%);

// Header
$header-background-color: $white;
$header-shadow: 0 4px 9px 0 #00000015 !important;
$header-item--color: lighten($dark, 20%);
$header-item-background-color: $white;
$header-item--active--background-color: $white;

$header-item--active--color: $link-text-color;

// Tabs (old, not style-guide)
$tabs-border-size: 1px;
$tabs-border-color: $dark-3;
$tabs-background-color: $white;
$tabs-item-background-color: $white;
$tabs-item-color: $dark;
$tabs-item-border-size: 3px;
$tabs-item-border-color: $white;
$tabs-item--active--color: $dark;
$tabs-item--active--border-color: $primary-color;
$tabs-item--active--background-color: $white;
$tabs-item--active--border-color: $primary-color;
$tabs-content-background-color: $white;

// Selector

$selector-active-border-color: $primary-color;
$selector-active-text-color: $primary-color;

$selector-border-color: $dark-3;
$selector-text-color: $dark-1;

// Header Menu

$header-menu--active--icon-background: $white;
$header-menu--active--box-shadow: 0 4px 9px 0 #00000015;
$header-menu-background-color: #fff;
$header-menu-item--hover--background-color: lighten($primary-color, 40%);

.lightTheme {
    @include theme(
        $header-menu--active--icon-background,
        $header-menu--active--box-shadow,
        $header-menu-background-color,
        $header-menu-item--hover--background-color,
        $selector-active-border-color,
        $selector-active-text-color,
        $selector-border-color,
        $selector-text-color,
        $tabs-content-background-color,
        $tabs-border-size,
        $tabs-border-color,
        $tabs-background-color,
        $tabs-item-background-color,
        $tabs-item-color,
        $tabs-item-border-size,
        $tabs-item-border-color,
        $tabs-item--active--color,
        $tabs-item--active--border-color,
        $tabs-item--active--background-color,
        $header-background-color,
        $header-shadow,
        $header-item--color,
        $header-item-background-color,
        $header-item--active--background-color,
        $header-item--active--color,
        $explorer-tab-content-background-color,
        $tab-content-background-color,
        $primary-text-color,
        $bg-color,
        $dark-text-color,
        $inactive-text-color,
        $link-text-color,
        $light-text-color,
        $secondary-text-color,
        $success-color,
        $info-color,
        $warning-color,
        $alert-color,
        $super-light-panel-bg-color,
        $panel-bg-color,
        $button-bg-color,
        $secondary-button-bg-color,
        $fee-color,
        $bid-color,
        $ask-color,
        $call-color,
        $light-panel-bg-color,
        $positive-color,
        $negative-color,
        $row-accent-color,
        $header-color,
        $input-background,
        $account-header,
        $account-cells,
        $account-green,
        $account-primarytext,
        $account-dimmed,
        $account-border,
        $account-background,
        $account-tabs-background,
        $pulsate-green-start,
        $pulsate-green-end,
        $pulsate-red-start,
        $pulsate-red-end,
        $settings-select-bg,
        $settings-select-color,
        $settings-menu-hover-bg,
        $settings-menu-active-bg,
        $settings-api-node-border-color,
        $main-content-margin-block-bg-color,
        $modal-bg-color,
        $mobile-input-bg,
        $incognito-bg,
        $explorer--witnesses--info-bg,
        $explorer--witnesses--info-border,
        $explorer--witnesses--info-table-title-color,
        $explorer--witnesses--info-table-text-color,
        $explorer--assets--bg,
        $negative-color-alternative,
        $positive-color-alternative,
        $separator-line,
        $medium-color,
        $dark-help-text,
        $settings-label-color
    );

    .change-up {
        font-weight: bold;
    }

    thead[class*="ant-table-thead"] th {
        background-color: #2196f3bb !important;
    }
    div[class*="ant-table-footer"] {
        background-color: #2196f3bb !important;
        color: white;
    }
}
