@import "theme-editor.css";
@import url('main-layout.css');
@import url('line-awesome/dist/line-awesome/css/line-awesome.min.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

@import url('components/label-element-button.css');
@import url('components/file-upload.css');
@import url('components/back-button.css');
@import url('components/filter-button.css');
@import url('components/red-button.css');
@import url('components/green-button.css');
@import url('components/confirm-button.css');
@import url('components/delete-icon.css');
@import url('components/login-view.css');
@import url('components/body.css');
@import url('components/footer.css');
@import url('components/fixed-header.css');
@import url('components/fixed-footer.css');

html, :host {
    --lumo-border-radius: 0.5em;
    --lumo-primary-color: hsl(226, 87%, 41%);
    --lumo-secondary-color: #FFFFFF;
    --lumo-primary-color-50pct: hsla(226, 87%, 41%, 0.5);
    --lumo-primary-color-30pct: hsla(226, 87%, 41%, 0.3);
    --lumo-primary-color-20pct: hsla(226, 87%, 41%, 0.2);
    --lumo-primary-color-10pct: hsla(226, 87%, 41%, 0.1);
    --lumo-body-text-color: hsla(215, 12%, 42%, 0.94);
    --lumo-header-text-color: #5C6777;

    --lumo-border-radius-m: 7px;

    --lumo-clickable-cursor: pointer;

    --page-padding: 3em;
}

vaadin-app-layout.dark-navbar::part(navbar),
[theme~="dark"] {
    --lumo-base-color: hsl(226, 87%, 41%);
    /*--lumo-primary-text-color: hsl(192, 99%, 66%);*/
    --lumo-primary-text-color: white;
    /*--lumo-primary-color: hsl(192, 99%, 66%);*/
    --lumo-primary-color: white;
    --lumo-primary-color-50pct: hsla(192, 99%, 66%, 0.5);
    --lumo-primary-color-30pct: hsla(192, 99%, 66%, 0.3);
    --lumo-primary-color-20pct: hsla(192, 99%, 66%, 0.2);
    --lumo-primary-color-10pct: hsla(192, 99%, 66%, 0.1);
}

vaadin-button:not([disabled]) {
    cursor: var(--lumo-clickable-cursor);
}

vaadin-drawer-toggle {
    cursor: var(--lumo-clickable-cursor);
}

.clickable {
    cursor: var(--lumo-clickable-cursor);
}

.clickable:hover {
    color: var(--lumo-primary-text-color);
}