@import "./color";
@import "./fonts";
@import "./typography";

//color-update
//todo: refactor
#gtx-trans{display: none !important;}







$active-shadow-color: 8px 8px 40px rgba(0, 0, 0, 0.1);


@mixin flex($justify: center,$align: center, $type: flex, $flex-wrap: wrap, $flex-direction: initial) {
    display: $type;
    justify-content: $justify;
    align-items: $align;
    flex-wrap: $flex-wrap;
    flex-direction: $flex-direction;

    //display: flex;
    //align-items: center;
    //justify-content: center;
    //flex-wrap: wrap;
}

@mixin link() {
    cursor: pointer;
    color: color(key);
    &:hover {
        color: color(key, 2);
    }
}

@mixin disabled() {
    opacity: .4;
    cursor: no-drop;
}

@mixin hover() {
    // transition: background-color .3s ease, color .3s ease;
    // &:hover {
    //     background: $default-input-color;
    //     color: color(dark);
    // }
    &:hover{
        background-color: color(grey,2,.5);
        color: color(dark);
    }
}

@mixin textOneLine($maxWidth: 100%, $textAlign: left) {
    display: block;
    text-align: #{$textAlign};
    white-space: nowrap;
    max-width: #{$maxWidth};
    overflow: hidden;
    text-overflow: ellipsis;
}

@mixin staticSize($width, $height: $width) {
    min-width: #{$width};
    max-width: #{$width};

    min-height: #{$height};
    max-height: #{$height};
}





// $con-key:           #3A55E7;

$con-red:           #E94F43;
$con-green:         #5DC183;
$con-yellow:        #FEC463;
$con-blue:          #4EC4F7;

$con-background:    #F2F2F2;
$con-gray-1-hover:  #e8e8e8;
$con-gray-2:        #E3E3E5;
$con-gray-3:        #C1C1C8;

$con-dark-0:        #000000;
$con-dark-1:        #111111;
$con-dark-2:        #212121;
$con-dark-3:        #303030;
$con-dark-4:        #3D3D3D;
$con-dark-5:        #434343;
$con-dark-6:        #636363;

$con-modal-mask:    hsla(0, 0, 0, .4);
$con-browser-wrapper-height: 72px;


// $font_family: "Inter";
$font_family: inherit;

$color_solids_background: rgba(250,250,250,1);
$color_solids_hover: rgba(51,54,58,0.05);
$color_solids_inverse: rgba(19,10,51,1);
$color_solids_pop-over: rgba(255,255,255,1);
$color_solids_viewport: rgba(255,255,255,1);
$color_solids_green: rgba(89,194,129,1);
$color_solids_pop-over-new: rgba(33,33,33,1);

$color_colors_gray: rgba(214,215,217,1);
$color_colors_key: rgba(4,59,198,1);
$color_colors_red: rgba(235,78,61,1);
$color_colors_yellow: rgba(248,210,78,1);
$color_colors_green: rgba(45,180,97,1);

$color_lines_light: rgba(186,185,185,0.3);
$color_lines_key: rgba(4,59,198,1);
$color_lines_red: rgba(235,78,61,1);
$color_lines_medium: rgba(186,185,185,69);
$color_lines_dark: rgba(19,10,51,1);

$color_typography_normal: rgba(34,34,38,1);
$color_typography_normal_ligth: rgba(34,34,38,0.8);
$color_typography_normal_dark: rgba(11,11,11,1);
$color_typography_inactive: rgba(34,34,38,0.2);
$color_typography_key: rgba(4,59,198,1);
$color_typography_white: rgba(255,255,255,1);

$default_font_size: 14px;

$background_color: #F8F8FB;
$gray_color: #EFEFF2;
$popover_color: #FFFFFF;
$viewport_color: #FFFFFF;

$dark_color: #000000;
$dark_1_color: #111111;
$dark_2_color: #212121;
$dark_3_color: #303030;
$dark_4_color: #3D3D3D;
$dark_5_color: #434343;
$dark_6_color: #636363;

$lights_grey_1_color:#EFEFF2;
$lights_grey_2_color: #DBDBDE;
$lights_grey_3_color: #C1C1C8;
$lights_grey_4_color: #F4F4F6;


$lights_background: #F3F3F3;

$key_color: #3A55E7;
$key_2_color: #0099FF;
$red_color: #E94F43;
$yellow_color: #FFC55A;
$green_color: #59C281;

$light_line_color: rgba(186,185,185,0.30);
$medium_line_color: rgba(186,185,185,0.69);
$dark_line_color: #013BCC;
$dark_line_color: #130A33;

$primary_text_color: #FFFFFF;
$secondary_text_color: rgba(34, 34, 38, 1);
$third_text_color: #111111;
$primary_dark_text_color: #6F6E6E;

$default_btn_radius: 2px;
$default_input_radius: 2px;
$default_checkbox_radius: 2px;
$default_switch_radius: 32px;

$default_size: 40px;
$largest_size: 56px;
$large_size: 48px;
$small_size: 32px;
$smallest_size: 24px;

$text_basis_line_height: 20px;
$hover_dark_level: 10%;
$dark-line-color: #313131;
$dark-gray-line-color: rgba(#808080, 0.4);

$default-input-color: #EFEFF2;

$default-hover: #EEEEF0;

$modal-height: 90vh;