//@import 'node_modules/bootstrap/scss/bootstrap';
//@import 'node_modules/bootstrap-vue/src/index.scss';

//@import "node_modules/bootstrap/scss/variables.scss";
//@import "node_modules/bootstrap/scss/mixins.scss";
//@import "node_modules/bootstrap/scss/reboot";

//@import "node_modules/bootstrap/scss/bootstrap-reboot.scss";
@import 'node_modules/bootstrap/scss/bootstrap-grid.scss';
//@import "node_modules/bootstrap/scss/grid";

//@import "node_modules/bootstrap-vue/src/variables";
//@import "node_modules/bootstrap-vue/src/mixins";
//@import "node_modules/bootstrap-vue/src/";

$mobile_width: 900px;
$width_s: 1300px;
$width_m: 1300px;

$container_padding_l: 30px 18vw;
$container_padding_m: 30px 160px;
$container_padding_s: 30px 3vw;
$container_padding_mobile: 10px 10px;

@mixin mobile-device {
    @media only screen and (max-width: $mobile_width) {
        @content;
    }
}

@mixin medium-device {
    @media only screen and (min-width: $mobile_width) and (max-width: $width_m) {
        @content;
    }
}

@mixin large-device {
    @media only screen and (min-width: 960px) and (max-width: 1200px) {
        @content;
    }
}

@mixin xl-device {
    @media only screen and (min-width: 1200px) and (max-width: 1600px) {
        @content;
    }
}

@mixin largest-device {
    @media only screen and (min-width: 1600px) {
        @content;
    }
}

@mixin night-mode {
    html[data-theme='night'] {
        @content;
    }
}

/* ==========================================
   font sizes inferred from Figma
   ========================================== */

$vertical-padding: 40px;
$container-padding: 40px;

// img size: 89px   // 319
$img-size: 89px;
$xl-size: 53.76px; // 192 (resized)
$l-size: 25.2px; // 90
$m-size: 21.28px; // 76
$s-size: 14px; // 50

$vertical-padding-mobile: 30px;
$container-padding-mobile: 15px;

$img-size-mobile: 77.88px;
$xl-size-mobile: 36px;
$l-size-mobile: 22px;
$m-size-mobile: 18px;
$s-size-mobile: 14px;

@mixin highlight-border {
    transition-duration: 0.1s;
    border: 1px solid transparent;
    outline: none !important;
    &:hover {
        border-color: var(--primary-color-light);
    }

    &:focus-within {
        border-color: var(--selection-color);
    }
}


video{
    outline: none;
}



*[tooltip]:hover:before {
    border-radius: 4px;
    /*left: 0;*/
    left: 0;
    transform: translateX(-50%);
    content: attr(tooltip);
    position: absolute;
    background-color: #303030;
    bottom: 100%;
    color: #ddd;
    width: max-content;
    max-width: 100px;
    font-size: 14px;
    padding: 4px 8px;
}

button {
    outline: none !important;
}
textarea,
input {
    @include highlight-border;

    &[disabled]{
        border-color: transparent !important;
    }
}

.hover_border {
    @include highlight-border;

    &[disabled]{
        border-color: transparent !important;
    }
}

input[type='number']{
    &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    -moz-appearance: textfield;
}

label {
    margin-bottom: initial !important;
}

//*[tooltip]:hover{
//  position: relative;
//  &:before{
//    font-size: 12px;
//    content: attr(tooltip);
//    background-color: #4C2E56;
//    color: #fff;
//    position: absolute;
//    left: 0px;
//    height: max-content;
//    top: 0px;
//  }
//}

/* For vue transitions */

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.2s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}

.float-enter-active,
.float-leave-active {
    transition: all 0.2s;
}
.float-enter, .float-leave-to /* .fade-leave-active below version 2.1.8 */ {
    transform: translateY(30px);
}

.slide_right-enter-active,
.slide_right-leave-active {
    transition: all 0.2s;
}
.slide_right-enter, .slide_right-leave-to /* .fade-leave-active below version 2.1.8 */ {
    transform: translateX(30px);
    opacity: 0;
}

.slide_bottom-enter-active,
.slide_bottom-leave-active {
    transition: opacity 0.2s;
}
.slide_bottom-enter, .slide_bottom-leave-to /* .fade-leave-active below version 2.1.8 */ {
    transform: translateY(100%);
    opacity: 0;
}

.shrink-enter-active,
.shrink-leave-active {
    transition: opacity 0.2s;
}
.shrink-enter, .shrink-leave-to /* .fade-leave-active below version 2.1.8 */ {
    transform: translateX(100%);
    opacity: 0;
}

/* ==========================================
   global UI
   ========================================== */

.ava_button {
    padding: 10px 24px;
    min-width: 140px;
    border-radius: 6px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase !important;
    font-size: $s-size;

    &:hover {
        opacity: 0.7;
    }

    &:disabled {
        opacity: 0.5 !important;
    }
}

.ava_button_secondary {
    background-color: transparent !important;
    padding: 10px 24px;
    min-width: 140px;
    border-radius: 6px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase !important;
    font-size: $s-size;

    &:hover {
        opacity: 0.7;
    }

    &:disabled {
        opacity: 0.5 !important;
    }
}

.link {
    font-size: $s-size;
    text-decoration: underline !important;
    margin-bottom: 20px;

    &:hover {
        opacity: 0.7;
    }
}

.single_line_input{
    display: block;
    width: 100%;
    padding: 5px 12px;
    border: 1px solid var(--bg-light);
    border-radius: 3px;
    color: var(--primary-color);
}

@include mobile-device {
    .link {
        margin-bottom: 0;
    }
}

$purple: #4c2e56;
$purple-light: #867e89;
$pink: #e84970;
$pink-light: #ff8080;
$pink-extra-light: #ffe6e6;
$gray: #f5f6fa;
$white: #fff;
$green: #6bc688;
$green-light: #83f2a6;
$green-extra-light: #a9efbf;

$primary-color: $purple;
$primary-color-light: $purple-light;
$secondary-color: $pink;
$secondary-color-light: $pink-light;
$secondary-color-extra-light: $pink-extra-light;
$background-color: $gray;

h1 {
    color: var(--primary-color);
}

h1,
h2,
h3,
h4 {
    font-family: 'Rubik', sans-serif;
}

.button_primary {
    background-color: var(--primary-color) !important;
    color: var(--bg) !important;
    text-decoration: none;
    &:hover {
        opacity: 0.7;
    }

    &[disabled] {
        background-color: var(--primary-color) !important;
        color: var(--primary-color-light) !important;
        opacity: 0.7;
        cursor: not-allowed !important;
    }
}
.button_secondary {
    background-color: var(--secondary-color) !important;
    color: #fff !important;
    text-decoration: none;
    &:hover {
        opacity: 0.7;
    }
}

.button_form_cancel {
    color: var(--primary-color-light);
    font-size: 12px;
    text-align: center;
    //opacity: 0.8;
    margin: 6px 0 !important;

    &:hover {
        //opacity: 1;
        color: var(--primary-color);
    }
}

.v-input--selection-controls__ripple {
    color: var(--secondary-color) !important;
}
textarea {
    color: var(--primary-color);
    background-color: var(--bg);
}

.v-input__slot {
    background-color: var(--bg) !important;
    input {
        color: var(--primary-color) !important;
    }
}

.v-tabs-bar,
.v-tabs-items {
    background-color: var(--bg) !important;
}

.v-tab {
    color: var(--primary-color-light) !important;
}
.v-tab--active {
    color: var(--primary-color) !important;
}

.v-messages {
    color: var(--primary-color) !important;
}

.v-text-field {
    @include highlight-border;
    color: var(--primary-color) !important;
    label {
        color: var(--primary-color-light) !important;
    }

    input {
        outline: none;
        border: none;
    }
    .v-input__slot:before {
        border-color: var(--primary-color-light) !important;
        color: var(--primary-color-light) !important;
    }

    &[disabled]{
        border-color: transparent !important;
    }
}

.v-chip {
    background-color: var(--bg-light) !important;
    color: var(--primary-color) !important;
}
.v-chip--active {
    background-color: var(--primary-color) !important;
    color: var(--bg-wallet) !important;
}

.vue__time-picker {
    color: var(--primary-color);

    input {
        border: none !important;
        background-color: var(--bg-light) !important;
        color: var(--primary-color) !important;
    }
}

.v-input--checkbox{
    label{
        color: var(--primary-color) !important;
    }
}

.vdatetime {
    background-color: var(--bg-light) !important;
    padding: 6px 12px !important;
    input {
        color: var(--primary-color) !important;
    }
}

.qr_input {
    background-color: var(--bg-light) !important;
    color: var(--primary-color) !important;
    font-size: 13px;

    @include highlight-border;

    &[disabled]{
        border-color: transparent !important;
    }
}

html[data-theme='day'] {
    --bg: #fff;
    --bg-1: 255, 255, 255;
    --bg-light: #f5f6fa;
    --bg-light-1: 245, 246, 250;

    --primary-color: #4c2e56;
    --primary-color-light: #867e89;
    --secondary-color: #e84970;
    --selection-color: #6a91d8;
    --link-secondary: #6e7479;
    --error: #f00;
    --success: #6bc688;
    --info: #2c7490;
    --info-1: 44, 116, 144;

    --bg-wallet: #f5f6fa;
    --bg-wallet-light: #fff;

    --warning: #ef8f4a;
}

html[data-theme='night'] {
    --bg: #242729;
    --bg-1: 36, 39, 41;
    --bg-light: #2e3234;
    --bg-light-1: 46, 50, 52;
    --primary-color: #e5e5e5;
    --primary-color-light: #6e7479;
    --secondary-color: #e84970;
    --selection-color: #6a91d8;
    --link-secondary: #6e7479;
    --error: #e84970;
    --success: #6bc688;
    --info: #4c8caf;
    --info-1: 76, 140, 175;

    --bg-wallet: #181b1d;
    --bg-wallet-light: #242729;

    --warning: #d49534;
}

p.err {
    color: var(--error);
    font-size: 0.9rem;
    margin: 4px 0;
    white-space: normal;
}

.no_scroll_bar{
    &::-webkit-scrollbar {
        display: none;
    }
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.flex-row{
    display: flex;
    flex-direction: row;
}

.flex-column{
    display: flex;
    flex-direction: column;
}

.subtext{
    color: var(--primary-color-light);
    font-size: 0.8em;
}

@include medium-device {
    h1 {
        font-size: 25px;
    }
}
