@import '../aura/aura.css';
@import 'components.css';
@import 'forms.css';


html {
  --aura-background-color-light: #e3ffe8;
  --aura-font-family: Arial, sans-serif;
  --aura-base-font-size: 16;
  
  /* grid styling */
    --lumen-grid-header-footer-bg-color: hsla(195, 78%, 48%, 1);
    --lumen-grid-header-font-family: Arial, sans-serif;
    --lumen-grid-header-font-weight: 600;
    --vaadin-grid-cell-background: hsla(195, 78%, 48%, 1);
    --lumen-grid-header-footer-font-size: 0.89rem;
    --lumen-grid-header-footer-corner-border-radius: 6px;
    --lumen-grid-header-padding-top: .5rem;
    --lumen-grid-header-padding-bottom: .5rem;
    --lumen-grid-header-height: 3rem;
    --lumen-grid-header-text-shaddow: 2px 2px 4px #000;
    --lumen-grid-text-align: left;
    --lumen-grid-line-height: 1.5rem;
    --lumen-grid-letter-spacing: 0.01071em;
 
    /* dashboard widget styling */
    --lumen-dashboard-widget-header-background-color: hsla(195, 78%, 48%, 1);
    --lumen-dashboard-widget-header-font-family: Arial, sans-serif;
    --lumen-dashboard-widget-header-font-size: 0.89rem;
    --lumen-dashboard-widget-header-text-shadow: 2px 2px 4px #000;
    --lumen-dashboard-widget-header-font-weight: 600;
    --lumen-dashboard-widget-header-line-height: 1.5rem;
    --lumen-dashboard-widget-header-border-top-left-radius: 6px;
    --lumen-dashboard-widget-header-border-top-right-radius: 6px;
}

vaadin-button {
  --aura-accent-color: #42C556;
  cursor: pointer;
}

/**
  * Grid styling
  */
/* Styling of top left header cell of the grid on our standard grid and buttons component*/
vaadin-grid::part(first-column-cell first-header-row-cell) {
    border-top-left-radius: var(--lumen-grid-header-footer-corner-border-radius);
    padding-top: var(--lumen-grid-header-padding-top);
    padding-bottom: var(--lumen-grid-header-padding-bottom);
    background-color: var(--lumen-grid-header-footer-bg-color);
    height: var(--lumen-grid-header-height);
    text-align: var(--lumen-grid-text-align);
    font-family: var(--lumen-grid-header-font-family);
    font-weight: var(--lumen-grid-header-font-weight);
    font-size: var(--lumen-grid-header-footer-font-size);
    line-height: var(--lumen-grid-line-height);
    letter-spacing: var(--lumen-grid-letter-spacing);
}

/* Styling of top left header cell of the grid on our standard grid and buttons component*/
vaadin-grid::part(last-column-cell first-header-row-cell) {
    border-top-right-radius: var(--lumen-grid-header-footer-corner-border-radius);
    padding-top: var(--lumen-grid-header-padding-top);
    padding-bottom: var(--lumen-grid-header-padding-bottom);
    background-color: var(--lumen-grid-header-footer-bg-color);
    height: var(--lumen-grid-header-height);
    text-align: var(--lumen-grid-text-align);
    font-family: var(--lumen-grid-header-font-family);
    font-weight: var(--lumen-grid-header-font-weight);
    font-size: var(--lumen-grid-header-footer-font-size);
    line-height: var(--lumen-grid-line-height);
    letter-spacing: var(--lumen-grid-letter-spacing);
}

/* Styling of any header cell of the grid on our standard grid and buttons component*/
vaadin-grid::part(header-cell) {
    padding-top: var(--lumen-grid-header-padding-top);
    padding-bottom: var(--lumen-grid-header-padding-bottom);
    background-color: var(--lumen-grid-header-footer-bg-color);
    height: var(--lumen-grid-header-height);
    text-shadow: var(--lumen-grid-header-text-shaddow);
    text-align: var(--lumen-grid-text-align);
    font-family: var(--lumen-grid-header-font-family);
    font-weight: var(--lumen-grid-header-font-weight);
    font-size: var(--lumen-grid-header-footer-font-size);
    line-height: var(--lumen-grid-line-height);
    letter-spacing: var(--lumen-grid-letter-spacing);
}

@property --lumen-grid-selected-row-background-color
{
    syntax: "*";
    inherits: true;
    initial-value: darkblue;
}

@property --lumen-grid-selected-row-font-family
{
    syntax: "*";
    inherits: true;
    initial-value: Arial, sans-serif;
}

@property --lumen-grid-selected-row-font-weight
{
    syntax: "*";
    inherits: true;
    initial-value: 600;
}

@property --lumen-grid-selected-row-font-size
{
    syntax: "*";
    inherits: true;
    initial-value: 0.89rem;
}

@property --lumen-grid-selected-row-text-shadow
{
    syntax: "*";
    inherits: true;
    initial-value: 3px 4px 5px #000;
}

vaadin-grid::part(selected-row-cell) {
    background-color: var(--lumen-grid-selected-row-background-color);
    font-family: var(--lumen-grid-selected-row-font-family);
    font-weight: var(--lumen-grid-selected-row-font-weight);
    font-size: var(--lumen-grid-selected-row-font-size);
    text-shadow: var(--lumen-grid-selected-row-text-shadow);
}

/**
 * Dashboard styling
 */
vaadin-dashboard-widget::part(header) {
    background-color: var(--lumen-dashboard-widget-header-background-color);
    border-top-left-radius: var(--lumen-dashboard-widget-header-border-top-left-radius);
    border-top-right-radius: var(--lumen-dashboard-widget-header-border-top-right-radius);
}

vaadin-dashboard-widget::part(title) {
    font-family: var(--lumen-dashboard-widget-header-font-family);
    font-size: var(--lumen-dashboard-widget-header-font-size);
    font-weight: var(--lumen-dashboard-widget-header-font-weight);
    text-shadow: var(--lumen-dashboard-widget-header-text-shadow);
    line-height: var(--lumen-dashboard-widget-header-line-height);
}

/*
 * Sidenav styling
 */
vaadin-side-nav > [slot="label"] {
    color: hsla(195, 78%, 48%, 1);
    font-weight: bolder;
    font-size: larger;
}

/**
 * Dialog styling
 */
@property --lumen-dialog-header-background-color
{
    syntax: "*";
    inherits: true;
    initial-value: hsla(195, 78%, 48%, 1);
}

@property --lumen-dialog-header-font-family
{
    syntax: "*";
    inherits: true;
    initial-value: Arial, sans-serif;
}

@property --lumen-dialog-header-font-weight
{
    syntax: "*";
    inherits: true;
    initial-value: 600;
}

@property --lumen-dialog-header-font-size
{
    syntax: "*";
    inherits: true;
    initial-value: 0.89rem;
}

@property --lumen-dialog-header-text-shadow
{
    syntax: "*";
    inherits: true;
    initial-value: 3px 4px 5px #000;
}

vaadin-dialog::part(header) {
    background-color: var(--lumen-dialog-header-background-color);
    font-family: var(--lumen-dialog-header-font-family);
    font-weight: var(--lumen-dialog-header-font-weight);
    font-size: var(--lumen-dialog-header-font-size);
    text-shadow: var(--lumen-dialog-header-text-shadow);
}