@use 'sass:color';
@use './mixins' as mix;
@use './variables' as vars;

:root {
	--color-light-25: #fafafa;
	--color-light-50: #f5f5f5;
	--color-light-100: #efefef;
	--color-light-150: #ebebeb;
	--color-light-200: #e5e5e5;
	--color-light-250: #cccccc;
	--color-light-300: #a9a9a9;
	--color-light-350: #656565;
	--color-light-400: #545454;
	--color-light-900: black;

	--color-dark-25: #16171e;
	--color-dark-50: #16171e;
	--color-dark-100: #1c1d26;
	--color-dark-150: #23242e;
	--color-dark-200: #292a35;
	--color-dark-250: #30313d;
	--color-dark-300: #3a3b47;
	--color-dark-350: #a3a4ae;
  --color-dark-400: #ccc;
	--color-dark-900: white;

	--color-primary-500: #855AFF;
  --color-primary-550: #7250D2;
	--color-primary-600: #663BDE;
  --color-primary-650: #5B34C8;
	--color-primary-700: #5738AE;
  --color-primary-750: #4D2E9A;

	--color-secondary-600: #53545E;

	--color-base-700: #202129;
	--color-base-600: #30313B;
	--color-base-500: #E3E3E3;
	--color-base-400: #E4E4E4;
	--color-base-200: #565656;
	--color-base-30: rgba(0, 0, 0, 0.2);
	--color-base-50: #F6F6F6;
	--color-base-70: #E8E8E8;

  --color-success-50: #eff8ee;
	--color-success-100: #eff8ee;
	--color-success-200: #64b457;
	--color-success-400: #75c568;
	--color-success-500: #64b457;

  	--color-warning-50: #fff3e4;
	--color-warning-100: #fff3e4;
	--color-warning-200: #e5912a;

	--color-error-50: #FFF2F2;
	--color-error-200: #CF4A4A;
  	--color-error-450: #B64D4D;
	--color-error-500: #d94e4e;
  	--color-error-550: #{color.adjust(#d94e4e, $lightness: -10%)};
  	--color-error-600: #{color.adjust(#d94e4e, $lightness: -20%)};
	--color-error-800: rgba(235, 81, 81, 0.08);
	--color-error-850: #{color.adjust(#D35F5F, $lightness: -15%)};
	--color-error-900: #D35F5F;


  --mat-typography-button-letter-spacing: normal;
}

@include mix.defineVar(--color-25, var(--color-light-25), var(--color-dark-25));
@include mix.defineVar(--color-900, var(--color-light-900), var(--color-dark-900));
@include mix.defineVar(--color-200, var(--color-light-200), var(--color-dark-200));
@include mix.defineVar(--color-300, var(--color-light-300), var(--color-dark-300));
@include mix.defineVar(--color-350, var(--color-light-350), var(--color-dark-350));
@include mix.defineVar(--color-400, var(--color-light-400), var(--color-dark-400));
@include mix.defineVar(--placeholder-color, #A9A9A9, #A4A5B0);

@include mix.defineVar(--logo-color, #4BE061, #4BE061);
@include mix.defineVar(--background, white, var(--color-dark-50));
@include mix.defineVar(--font-color, black, white);
@include mix.defineVar(--info-color, var(--color-light-50), #1C1D25);

@include mix.defineVar(--field-color, transparent, transparent);
@include mix.defineVar(--field-border-color, var(--color-base-400), #303241);
@include mix.defineVar(--field-border-color--hover, var(--color-light-250), var(--color-secondary-600));
@include mix.defineVar(--field-color--disabled, rgba(200, 200, 200, 0.1), #1C1D25);

@include mix.defineVar(--field-border-color-input--focus, var(--color-primary-500), var(--color-primary-500));

@include mix.defineVar(--field-border-color--error, var(--color-error-200), var(--color-error-200));
@include mix.defineVar(--error-font-color, var(--color-error-900), var(--color-error-900));

@include mix.defineVar(--notif-bg-color--active, rgba(122, 116, 255, 0.04), rgba(122, 116, 255, 0.04));
@include mix.defineVar(--notif-border-left--active, #7A74FF, #7A74FF);

@include mix.defineVar(--notif-bg-color, #FFFFFF, #202129);
@include mix.defineVar(--notif-border-color, #E4E4E4, rgba(255, 255, 255, 0.05));
@include mix.defineVar(--notif-item-border-color, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.05));

@include mix.defineVar(--btn-icon-color--pressed, #FFFFFF, #30313B);
@include mix.defineVar(--link-font-color, var(--color-light-350), #A4A5B0);
@include mix.defineVar(--link-font-color--hover, var(--color-primary-500), #FFFFFF);
@include mix.defineVar(--link-color, var(--color-base-50), var(--color-base-600));

@include mix.defineVar(--alternative-text-color, var(--color-light-350), #A4A5B0);

// Label colors
@include mix.defineVar(--label-font-color, black, #A4A5B0);
@include mix.defineVar(--label-font-color--light, var(--color-light-350), #A4A5B0);

// Credit cards colors
@include mix.defineVar(--card-mastercard-color, #FFF2F2, #2B151E);
@include mix.defineVar(--card-maestro-color, #F2FAFE, #142532);
@include mix.defineVar(--card-visa-color, #F3F5FD, #161a2f);
@include mix.defineVar(--card-icon-visa-color, #1434CB, #fff);
@include mix.defineVar(--card-americanexpress-color, #F2F8FD, #142030);
@include mix.defineVar(--card-chinaunionpay-color, #F2F8F9, #142128);
@include mix.defineVar(--card-mir-color, #F3F8F6, #152123);

// Paginator colors
@include mix.defineVar(--paginator-color, var(--color-light-350), #A4A5B0);
@include mix.defineVar(--paginator-font-color--active, black, white);
@include mix.defineVar(--paginator-border-color, white, #303241);
@include mix.defineVar(--paginator-border-color--active, rgba(0, 0, 0, 0.1), #303241);

// Currency styles

@include mix.defineVar(--currency-color, var(--color-light-350), #A4A5B0);
@include mix.defineVar(--currency-amount-color, black, white);

@include mix.defineVar(--table-tr-border-color, rgba(0, 0, 0, 0.1), #232530);

// Hint
@include mix.defineVar(--hint-font-color, var(--color-light-350), var(--color-dark-350));
@include mix.defineVar(--hint-font-color--bold, black, white);
@include mix.defineVar(--hint-color, var(--color-light-50), var(--color-dark-100));

// Buttons
@include mix.defineVar(--btn-color, transparent, transparent);
@include mix.defineVar(--btn-color--hover, transparent, transparent);
@include mix.defineVar(--btn-color--active, transparent, transparent);
@include mix.defineVar(--btn-font-color, var(--color-light-350), var(--color-dark-350));
@include mix.defineVar(--btn-font-color--hover, var(--color-light-350), var(--color-dark-400));
@include mix.defineVar(--btn-font-color--active, black, white);
@include mix.defineVar(--btn-icon-color, var(--color-light-300), var(--color-dark-350));
@include mix.defineVar(--btn-icon-color--hover, var(--color-light-350), var(--color-dark-400));
@include mix.defineVar(--btn-icon-color--active, black, white);

@include mix.defineVar(--btn-color--disabled, transparent, transparent);
@include mix.defineVar(--btn-font-color--disabled, var(--color-light-250), var(--color-dark-250));
@include mix.defineVar(--btn-icon-color--disabled, var(--color-light-250), var(--color-dark-250));
@include mix.defineVar(--btn-border-color--disabled, transparent, transparent);

@include mix.defineVar(--btn-primary-color, var(--color-primary-500), var(--color-primary-550));
@include mix.defineVar(--btn-primary-color--hover, var(--color-primary-600), var(--color-primary-700));
@include mix.defineVar(--btn-primary-color--active, var(--color-primary-650), var(--color-primary-750));
@include mix.defineVar(--btn-primary-font-color, white, white);
@include mix.defineVar(--btn-primary-font-color--hover, white, white);
@include mix.defineVar(--btn-primary-font-color--active, white, white);
@include mix.defineVar(--btn-primary-color--disabled, var(--color-light-250), var(--color-dark-300));
@include mix.defineVar(--btn-primary-icon-color--disabled, white, var(--color-dark-50));
@include mix.defineVar(--btn-primary-font-color--disabled, white, var(--color-dark-50));

@include mix.defineVar(--btn-danger-color, transparent, transparent);
@include mix.defineVar(--btn-danger-color--hover, transparent, transparent);
@include mix.defineVar(--btn-danger-color--active, transparent, transparent);
@include mix.defineVar(--btn-danger-font-color, var(--color-error-500), var(--color-error-500));
@include mix.defineVar(--btn-danger-font-color--hover, var(--color-error-550), var(--color-error-550));
@include mix.defineVar(--btn-danger-font-color--active, var(--color-error-600), var(--color-error-600));
@include mix.defineVar(--btn-danger-icon-color, var(--color-error-500), var(--color-error-500));
@include mix.defineVar(--btn-danger-icon-color--hover, var(--color-error-550), var(--color-error-550));
@include mix.defineVar(--btn-danger-icon-color--active, var(--color-error-600), var(--color-error-600));

@include mix.defineVar(--btn-danger-secondary-color, var(--color-error-50), #251b22);
@include mix.defineVar(--btn-danger-secondary-color--hover, #ffe6e6, #{color.adjust(#251b22, $lightness: 2%)});
@include mix.defineVar(--btn-danger-secondary-color--active, #ffdada, #{color.adjust(#251b22, $lightness: 4%)});
@include mix.defineVar(--btn-danger-secondary-font-color, var(--color-error-500), var(--color-error-500));
@include mix.defineVar(--btn-danger-secondary-font-color--hover, var(--color-error-550), var(--color-error-550));
@include mix.defineVar(--btn-danger-secondary-font-color--active, var(--color-error-600), var(--color-error-600));
@include mix.defineVar(--btn-danger-secondary-icon-color, var(--color-error-500), var(--color-error-500));
@include mix.defineVar(--btn-danger-secondary-icon-color--hover, var(--color-error-550), var(--color-error-550));
@include mix.defineVar(--btn-danger-secondary-icon-color--active, var(--color-error-600), var(--color-error-600));

@include mix.defineVar(--btn-secondary-color, var(--color-light-50), var(--color-dark-150));
@include mix.defineVar(--btn-secondary-color--hover, var(--color-light-150), var(--color-dark-200));
@include mix.defineVar(--btn-secondary-color--active, var(--color-light-200), var(--color-dark-250));
@include mix.defineVar(--btn-secondary-font-color, black, white);
@include mix.defineVar(--btn-secondary-font-color--hover, black, white);
@include mix.defineVar(--btn-secondary-font-color--active, black, white);
@include mix.defineVar(--btn-secondary-icon-color, var(--color-light-350), var(--color-dark-350));
@include mix.defineVar(--btn-secondary-icon-color--hover, var(--color-light-350), white);
@include mix.defineVar(--btn-secondary-icon-color--active, var(--color-light-350), white);
@include mix.defineVar(--btn-secondary--border-color, rgba(0, 0, 0, 0.1), #30313B);
@include mix.defineVar(--btn-secondary-color--disabled, var(--color-light-250), var(--color-dark-300));
@include mix.defineVar(--btn-secondary-icon-color--disabled, white, var(--color-dark-50));
@include mix.defineVar(--btn-secondary-font-color--disabled, white, var(--color-dark-50));

@include mix.defineVar(--btn-outline-color, transparent, transparent);
@include mix.defineVar(--btn-outline-color--hover, var(--color-light-50), var(--color-dark-100));
@include mix.defineVar(--btn-outline-color--active, var(--color-light-100), var(--color-dark-150));
@include mix.defineVar(--btn-outline-icon-color, var(--color-light-350), var(--color-dark-350));
@include mix.defineVar(--btn-outline-icon-color--hover, var(--color-light-350), var(--color-dark-350));
@include mix.defineVar(--btn-outline-icon-color--active, var(--color-light-350), white);
@include mix.defineVar(--btn-outline-font-color, black, white);
@include mix.defineVar(--btn-outline-font-color--hover, black, white);
@include mix.defineVar(--btn-outline-font-color--active, black, white);
@include mix.defineVar(--btn-outline-border-color, var(--color-light-200), var(--color-dark-200));
@include mix.defineVar(--btn-outline-border-color--hover, var(--color-light-250), var(--color-dark-250));
@include mix.defineVar(--btn-outline-border-color--active, var(--color-light-300), var(--color-dark-300));
@include mix.defineVar(--btn-outline-color--disabled, var(--color-light-250), var(--color-dark-300));
@include mix.defineVar(--btn-outline-icon-color--disabled, white, var(--color-dark-50));
@include mix.defineVar(--btn-outline-font-color--disabled, white, var(--color-dark-50));

// Select
@include mix.defineVar(--select-color, white, #1C1D25);
@include mix.defineVar(--select-color--hover, white, var(--color-base-700));
@include mix.defineVar(--select-color--active, white, var(--color-base-600));
@include mix.defineVar(--select-border-color, transparent, transparent);
@include mix.defineVar(--select-border-color--hover, var(--color-base-400), transparent);
@include mix.defineVar(--select-border-color--active, var(--color-base-400), transparent);
@include mix.defineVar(--select-options-border-color, var(--color-base-400), rgba(255, 255, 255, 0.05));
@include mix.defineVar(--select-option-color, white, var(--color-base-700));
@include mix.defineVar(--select-option-color--hover, var(--color-light-50), var(--color-dark-200));
@include mix.defineVar(--select-option-color--active, var(--color-light-100), var(--color-dark-250));
@include mix.defineVar(--select-options-scrollbar-color, var(--color-base-400), var(--color-base-600));
@include mix.defineVar(--select-placeholder-color, var(--color-light-350), var(--color-dark-350));

// Slide toggle

@include mix.defineVar(--slide-toggle-selected-handle-color--disabled, white, black);

// Menu
@include mix.defineVar(--menu-color, white, var(--color-dark-100));
@include mix.defineVar(--menu-item-color, white, var(--color-dark-100));
@include mix.defineVar(--menu-item-color--hover, var(--color-light-50), #2A2B34);
@include mix.defineVar(--menu-item-color--active, var(--color-primary-500), var(--color-primary-500));
@include mix.defineVar(--menu-item-font-color, black, var(--color-dark-350));
@include mix.defineVar(--menu-item-font-color--hover, black, white);
@include mix.defineVar(--menu-item-font-color--active, white, white);
@include mix.defineVar(--menu-item-icon-color, var(--color-light-350), #A4A5B0);
@include mix.defineVar(--menu-item-icon-color--hover, var(--color-primary-500), #FFFFFF);
@include mix.defineVar(--menu-item-icon-color--active, white, white);

@include mix.defineVar(--menu-mobile-item-font-color, var(--color-light-350), #A4A5B0);
@include mix.defineVar(--menu-mobile-item-font-color--active, var(--color-primary-500), white);
@include mix.defineVar(--menu-mobile-item-icon-color, var(--color-light-350), #A4A5B0);
@include mix.defineVar(--menu-mobile-item-icon-color--active, var(--color-primary-500), white);

// Tabs
@include mix.defineVar(--tab-header-color, var(--color-light-150), var(--color-dark-150));
@include mix.defineVar(--tab-link--active, black, white);

// Logo text
@include mix.defineVar(--logo-text-color, black, white);

// Table header text
@include mix.defineVar(--table-th-font-color, var(--color-light-350), #A4A5B0);
@include mix.defineVar(--table-expandable-content-color, var(--color-light-50), var(--color-dark-100));

// Divider and skeleton
@include mix.defineVar(--divider-color, rgba(0, 0, 0, 0.08), #303241);
@include mix.defineVar(--skeleton-color, #eff1f6, rgb(50, 50, 50, .4));
@include mix.defineVar(--skeleton-gradient,
  linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)),
  linear-gradient(90deg, transparent, rgba(0, 0, 0, .2), transparent)
);

// Accounts
@include mix.defineVar(--account-color, #F5F5F5, #1C1D25);
@include mix.defineVar(--account-border-color, transparent, transparent);

// Account cards
@include mix.defineVar(--account-card-btn-color, white, var(--color-dark-200));

// History - Filter
@include mix.defineVar(--history-filter-color--tablet, white, var(--color-base-700));
@include mix.defineVar(--history-filter-border-color--tablet, #E4E4E4, rgba(0, 0, 0, 0.1));
@include mix.defineVar(--history-filter-color--desktop, white, transparent);

@include mix.defineVar(--card-color, #F5F5F5, #1C1D25);
@include mix.defineVar(--payout-amount-currency-color, #9B9B9B, #A4A5B0);
@include mix.defineVar(--visa-icon, url(#{vars.$ui-kit-assets-dir}/svg/visa_icon.svg), url(#{vars.$ui-kit-assets-dir}/svg/visa_icon_for_dark_theme.svg));

// Limits charts
@include mix.defineVar(--chart-basic-color, var(--color-light-200), var(--color-dark-150));
@include mix.defineVar(--chart-title-color, var(--color-light-300), var(--color-dark-350));
@include mix.defineVar(--totals-title-color, var(--color-light-350), var(--color-dark-350));

// Badged
@include mix.defineVar(--badge-warning-color, var(--color-warning-100), #2B231F);
@include mix.defineVar(--badge-warning-font-color, var(--color-warning-200), var(--color-warning-200));

// Verification tooltip
@include mix.defineVar(--toggle-btn--active, var(--color-primary-500), var(--color-dark-250));

// Issued cards
@include mix.defineVar(--issued-card-add-button-border-color, var(--color-light-200), var(--color-dark-150));
@include mix.defineVar(--issued-card-color, #16171E, #16171E);
@include mix.defineVar(--issued-card-border-color, transparent, var(--color-dark-150));

// Issue card
@include mix.defineVar(--i-card-progress--border-color, var(--color-light-200), var(--color-dark-200));
@include mix.defineVar(--i-card-progress--color, white, #16171e);
@include mix.defineVar(--card-issue-icon-font-color, #A9A9A9, #3A3B47);


@include mix.defineVar(--daterange-picker-icon-color, #656565, #A3A4AE);

@include mix.defineVar(--mat-tabs-lebel-font-color, #656565, #A3A4AE);
@include mix.defineVar(--mat-tabs-lebel-font-color--active, #000, #fff);

// Checkbox
@include mix.defineVar(--checkbox-color--checked, var(--color-primary-500), var(--color-primary-500));
@include mix.defineVar(--checkbox-border-color-hover--checked, var(--color-primary-600), var(--color-primary-600));
@include mix.defineVar(--checkbox-color--checked-disabled, #{color.adjust(#855AFF, $lightness: 5%)}, #{color.adjust(#7250D2, $lightness: -2%)});
@include mix.defineVar(--checkbox-border-color, var(--color-light-200), var(--color-dark-250));
@include mix.defineVar(--checkbox-border-hover-color, var(--color-light-250), var(--color-dark-300));
@include mix.defineVar(--checkbox-color, #fff, #16171E);
@include mix.defineVar(--checkbox-color--disabled, var(--color-light-250), var(--color-dark-300));
@include mix.defineVar(--checkbox-label-color--disabled, var(--color-light-350), var(--color-dark-350));
@include mix.defineVar(--checkbox-checkmark-color--disabled, white, var(--color-dark-350));

// radio
@include mix.defineVar(--radio-color--checked, var(--color-primary-500), var(--color-primary-500));
@include mix.defineVar(--radio-color--checked-disabled, #{color.adjust(#855AFF, $lightness: 5%)}, #{color.adjust(#7250D2, $lightness: -2%)});
@include mix.defineVar(--radio-border-color, var(--color-light-200), var(--color-dark-250));
@include mix.defineVar(--radio-border-hover-color, var(--color-light-250), var(--color-dark-300));
@include mix.defineVar(--radio-label-color--disabled, var(--color-light-350), var(--color-dark-350));
@include mix.defineVar(--radio-checkmark-color--disabled, white, var(--color-dark-350));
@include mix.defineVar(--radio-bg-color--disabled, var(--color-light-250), var(--color-dark-300));

// scrollbar
@include mix.defineVar(--scrollbar-color, var(--color-base-400), var(--color-base-600));

.dark-theme--hidden {
	display: block;
}
.light-theme--hidden {
	display: none;
}

.dark-theme {
	.dark-theme--hidden {
		display: none;
	}
	.light-theme--hidden {
		display: block;
	}
}

//icons in input form
@include mix.defineVar(--form-icon-color, var(--color-light-350), var(--color-dark-350));