/* You can add global styles to this file, and also import other style files */
@use 'variables' as vars;
@use 'common-functions';
@use 'common-variables';
@use 'assets/styles/red-theme';

@font-face {
    font-family: 'OpenSans Extrabold';
    src: url('./assets/styles/fonts/OpenSans-ExtraBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-weight: 300;
    src: url('./assets/styles/fonts/Inter-VariableFont.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-weight: 400;
    src: url('./assets/styles/fonts/Inter-VariableFont.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-weight: 500;
    src: url('./assets/styles/fonts/Inter-VariableFont.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-weight: 600;
    src: url('./assets/styles/fonts/Inter-VariableFont.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-weight: 700;
    src: url('./assets/styles/fonts/Inter-VariableFont.ttf') format('truetype');
}

.error-glyph-margin {
    background: url('./assets/icons/general/alert-circle.svg') no-repeat center;
    background-size: 80%;
}

@include common-variables.configureLight(
    $iqser-primary: vars.$primary,
    $iqser-primary-rgb: common-functions.hexToRgb(vars.$primary),
    $iqser-primary-2: vars.$primary-2,
    $iqser-accent: vars.$accent,
    $iqser-accent-rgb: common-functions.hexToRgb(vars.$accent),
    $iqser-background: vars.$white,
    $iqser-alt-background: vars.$grey-2,
    $iqser-text: vars.$accent,
    $iqser-text-rgb: common-functions.hexToRgb(vars.$accent),
    $iqser-disabled: vars.$grey-7,
    $iqser-not-disabled-table-item: vars.$grey-8,
    $iqser-btn-bg-hover: vars.$grey-4,
    $iqser-btn-bg: vars.$grey-6,
    $iqser-side-nav: vars.$grey-2,
    $iqser-warn: vars.$warn,
    $iqser-separator: rgba(vars.$grey-4, 0.9),
    $iqser-grey-2: vars.$grey-2,
    $iqser-grey-3: vars.$grey-3,
    $iqser-grey-4: vars.$grey-4,
    $iqser-grey-5: vars.$grey-5,
    $iqser-grey-6: vars.$grey-6,
    $iqser-grey-7: vars.$grey-7,
    $iqser-green-1: vars.$green-1,
    $iqser-green-2: vars.$green-2,
    $iqser-yellow-1: vars.$yellow-1,
    $iqser-yellow-2: vars.$yellow-2,
    $iqser-helpmode-primary: vars.$green-2,
    $iqser-inputs-outline: vars.$grey-5,
    $iqser-popup-background: vars.$white,
    $iqser-shadow: vars.$grey-4,
    $iqser-toggle-bg: vars.$grey-4,
    $iqser-file-drop-drag-over: #e2eefd,
    $iqser-user-avatar-1: vars.$grey-6,
    $iqser-user-avatar-2: vars.$grey-4,
    $iqser-annotation-hover: vars.$grey-8,
    $iqser-annotation-comments-hover: vars.$grey-4,
    $iqser-workload-pages-bg: vars.$grey-8,
    $iqser-tab-hover: vars.$grey-6,
    $iqser-loading-progress: vars.$grey-7,
    $iqser-highlight-color: #fffcc4,
    $iqser-skeleton-color: vars.$grey-4,
    $iqser-app-name-color: vars.$accent
);

$light-accent-5: lighten(vars.$accent, 5%);
$light-accent-10: lighten(vars.$accent, 10%);

$dark-accent-5: darken(vars.$accent, 5%);
$dark-accent-8: darken(vars.$accent, 8%);
$dark-accent-10: darken(vars.$accent, 10%);

@include common-variables.configureDark(
    $iqser-primary: vars.$primary,
    $iqser-primary-rgb: common-functions.hexToRgb(vars.$primary),
    $iqser-primary-2: vars.$primary-2,
    $iqser-accent: vars.$accent,
    $iqser-accent-rgb: common-functions.hexToRgb(vars.$accent),
    $iqser-background: $dark-accent-10,
    $iqser-alt-background: $dark-accent-5,
    $iqser-text: vars.$white,
    $iqser-text-rgb: common-functions.hexToRgb(vars.$white),
    $iqser-disabled: vars.$grey-7,
    $iqser-not-disabled-table-item: $dark-accent-5,
    $iqser-btn-bg-hover: vars.$accent,
    $iqser-btn-bg: $dark-accent-5,
    $iqser-side-nav: $dark-accent-8,
    $iqser-warn: vars.$warn,
    $iqser-separator: vars.$accent,
    $iqser-grey-2: vars.$grey-2,
    $iqser-grey-3: vars.$grey-3,
    $iqser-grey-4: vars.$grey-4,
    $iqser-grey-5: vars.$grey-5,
    $iqser-grey-6: vars.$grey-6,
    $iqser-grey-7: vars.$grey-7,
    $iqser-green-1: vars.$green-1,
    $iqser-green-2: vars.$green-2,
    $iqser-yellow-1: vars.$yellow-1,
    $iqser-yellow-2: vars.$yellow-2,
    $iqser-helpmode-primary: vars.$green-2,
    $iqser-inputs-outline: $light-accent-10,
    $iqser-popup-background: $dark-accent-5,
    $iqser-shadow: rgba(0, 0, 0, 0.4),
    $iqser-toggle-bg: $light-accent-5,
    $iqser-file-drop-drag-over: $light-accent-10,
    $iqser-user-avatar-1: $light-accent-5,
    $iqser-user-avatar-2: $light-accent-10,
    $iqser-annotation-hover: $dark-accent-5,
    $iqser-annotation-comments-hover: $light-accent-5,
    $iqser-workload-pages-bg: $dark-accent-8,
    $iqser-tab-hover: vars.$accent,
    $iqser-loading-progress: $light-accent-10,
    $iqser-highlight-color: #905854,
    $iqser-skeleton-color: vars.$grey-10,
    $iqser-app-name-color: vars.$white
);

body {
    --workload-width: 350px;
    --iqser-app-name-font-family: OpenSans Extrabold, sans-serif;
    --iqser-app-name-font-size: 13px;
    --iqser-logo-size: 28px;
}

#viewer {
    visibility: hidden;
    width: calc(100% - var(--workload-width));
    height: calc(100% - calc(var(--iqser-top-bar-height) + 50px));
    bottom: 0;
    left: 0;
    position: absolute;
}
