html, body , :host {
    /*Default values */
    --kisters-style-border-radius: var(--metrics-radius-s);
    --kisters-style-border-size: var(--type-font-size-xs);

    --kisters-style-invalid-border: 1px solid var(--color-border-error) !important;
    --kisters-style-invalid-background: var(--color-surface-primary) !important;
    --kisters-style-invalid-color: var(--color-text-danger-primary);

    /* Header Defaults */
    --kisters-header-icon-height: var(--metrics-height-button-l);
    --kisters-header-icon-width: var(--metrics-height-button-l);


    /* Input configuration */
    --kisters-style-input-height: var(--metrics-height-input-m);
    --kisters-style-input-margin: var(--metrics-spacing-xs);
    --kisters-style-input-padding: var(--metrics-spacing-none) var(--metrics-spacing-m);
    --kisters-style-input-padding-left: var(--metrics-spacing-m);
    --kisters-style-input-label-margin: var(--metrics-spacing-none), var(--metrics-spacing-xs), var(--metrics-spacing-none), var(--metrics-spacing-none);
    --kisters-style-input-label-color: var(--color-text-primary);
    --kisters-style-input-text-color: var(--color-text-primary);
    --kisters-style-input-border: 1px solid var(--color-border-input);
    --kisters-style-input-background: var(--color-surface-primary);

    --kisters-style-input-disabled-color: var(--color-text-tertiary);
    --kisters-style-input-disabled-border: 1px solid var(--color-border-input);
    --kisters-style-input-disabled-background: var(--color-surface-accent);

    --kisters-style-input-hover-color: var(--color-text-primary);
    --kisters-style-input-hover-border: 1px solid var(--color-border-input);
    --kisters-style-input-hover-background: var(--color-surface-hover);

    --kisters-style-input-focus-color: var(--color-text-primary);
    --kisters-style-input-focus-border: 1px solid var(--color-border-focus);
    --kisters-style-input-focus-background: var(--color-surface-primary);

    --kisters-style-input-text-area-height: 86px;
    --kisters-style-input-text-area-padding: var(--metrics-spacing-m);


    /* TODO: link to fonts */
    --kisters-style-font-family: "Roboto";
    --kisters-style-font-size-standard: 14px;

    /* Vaadin custom style */
    --lumo-clickable-cursor: pointer;
    --lumo-border-radius: var(--kisters-style-border-radius);
    --lumo-border-radius-s: var(--kisters-style-border-radius);
    --lumo-border-radius-m: var(--kisters-style-border-radius);
    --lumo-border-radius-l: var(--kisters-style-border-radius);
    --lumo-size-m: var(--kisters-style-input-height);
    --lumo-font-family: var(--kisters-style-font-family);
    --lumo-primary-color: var(--color-surface-contrast);
    --lumo-base-color: var(--color-surface-primary);
    --lumo-primary-text-color: var(--color-text-highlight-1);
    --lumo-body-text-color: var(--kisters-style-input-text-color);
    --lumo-disabled-text-color: var(--kisters-style-input-disabled-color);
    --lumo-tertiary-text-color: var(--kisters-style-input-label-color);
    --lumo-secondary-text-color: var(--kisters-style-input-label-color);
    --lumo-error-text-color: var(--kisters-style-invalid-color);
    --lumo-error-color-10pct: var(--kisters-style-invalid-color);
    --lumo-error-color-50pct: var(---kisters-style-invalid-color);
    --lumo-primary-contrast-color: var(--kisters-style-background);
    --lumo-contrast: var(--kisters-style-input-background);
    --lumo-contrast-10pct: var(--kisters-style-input-background);

    --lumo-contrast-60pct: var(--color-icon-primary);
    --lumo-primary-color-50pct: var(--color-text-primary);
    --lumo-primary-color-10pct: var(--color-text-secondary);
    --lumo-space-m: var(--kisters-style-input-margin);
    --lumo-required-field-indicator-color: var(--color-text-danger-primary);
    --lumo-required-field-indicator: '*';
    --lumo-font-size-s: var(--kisters-style-font-size-standard);
    --lumo-font-size-m: var(--kisters-style-font-size-standard);
    --lumo-contrast-90pct: var(--kisters-style-input-text-color);
}

input:not(vaadin-text-field input,
    vaadin-text-area input,
    vaadin-email-field input,
    vaadin-password-field input,
    vaadin-number-field input,
    vaadin-integer-field input,
    vaadin-date-picker input,
    vaadin-time-picker input,
    vaadin-date-time-picker-date-picker input,
    vaadin-date-time-picker-time-picker input,
    vaadin-combo-box input,
    vaadin-multi-select-combo-box input,
    multiselect-combo-box input,
    input[type="range"]) {
    border: var(--kisters-style-input-border);
    border-radius: var(--kisters-style-border-radius);
    background-color: var(--kisters-style-input-background);
    color: var(--kisters-style-input-text-color);
    font-size: var(--kisters-style-font-size-standard);
    font-family: var(--kisters-style-font-family);
    height: var(--kisters-style-input-height);
    margin-top: var(--kisters-style-input-margin);
    padding: var(--kisters-style-input-padding);
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
  transition: background-color 0s 600000s, color 0s 600000s !important;
}

input:hover:not(vaadin-text-field input,
vaadin-email-field input,
vaadin-password-field input,
vaadin-number-field input,
vaadin-integer-field input,
vaadin-date-picker input,
vaadin-time-picker input,
vaadin-date-time-picker-date-picker input,
vaadin-date-time-picker-time-picker input,
vaadin-combo-box input,
vaadin-multi-select-combo-box input,
multiselect-combo-box input,
input[type="range"]),
textarea:hover,
vaadin-text-field::part(input-field):hover,
vaadin-password-field::part(input-field):hover,
vaadin-email-field::part(input-field):hover,
vaadin-number-field::part(input-field):hover,
vaadin-integer-field::part(input-field):hover,
vaadin-date-picker::part(input-field):hover,
vaadin-time-picker::part(input-field):hover,
vaadin-date-time-picker-date-picker::part(input-field):hover,
vaadin-date-time-picker-time-picker::part(input-field):hover,
vaadin-combo-box::part(input-field):hover,
vaadin-multi-select-combo-box::part(input-field):hover,
multiselect-combo-box::part(input-field):hover {
    background-color: var(--kisters-style-input-hover-background);
    border: var(--kisters-style-input-hover-border);
    color: var(--kisters-style-input-hover-color);
}

input:focus:not(vaadin-text-field input,
    vaadin-text-area input,
    vaadin-email-field input,
    vaadin-password-field input,
    vaadin-number-field input,
    vaadin-integer-field input,
    vaadin-date-picker input,
    vaadin-time-picker input,
    vaadin-date-time-picker-date-picker input,
    vaadin-date-time-picker-time-picker input,
    vaadin-combo-box input,
    vaadin-multi-select-combo-box input,
    multiselect-combo-box input,
    input[type="range"]),
input:focus-visible:not(vaadin-text-field input,
    vaadin-text-area input,
    vaadin-email-field input,
    vaadin-password-field input,
    vaadin-number-field input,
    vaadin-integer-field input,
    vaadin-date-picker input,
    vaadin-time-picker input,
    vaadin-date-time-picker-date-picker input,
    vaadin-date-time-picker-time-picker input,
    vaadin-combo-box input,
    vaadin-multi-select-combo-box input,
    multiselect-combo-box input,
    input[type="range"]),
textarea:focus,
textarea:focus-visible,
vaadin-text-field[focused]::part(input-field),
vaadin-email-field[focused]::part(input-field),
vaadin-password-field[focused]::part(input-field),
vaadin-number-field[focused]::part(input-field),
vaadin-integer-field[focused]::part(input-field),
vaadin-date-picker[focused]::part(input-field),
vaadin-time-picker[focused]::part(input-field),
vaadin-date-time-picker-date-picker[focused]::part(input-field),
vaadin-date-time-picker-time-picker[focused]::part(input-field),
vaadin-combo-box[focused]::part(input-field),
vaadin-multi-select-combo-box::part(input-field),
multiselect-combo-box[focused]::part(input-field)  {
    background-color: var(--kisters-style-input-focus-background);
    border: var(--kisters-style-input-focus-border);
    color: var(--kisters-style-input-focus-color);
    outline: none !important;
}

input:disabled:not(vaadin-text-field input,
    vaadin-text-area input,
    vaadin-email-field input,
    vaadin-password-field input,
    vaadin-number-field input,
    vaadin-integer-field input,
    vaadin-date-picker input,
    vaadin-date-time-picker-date-picker input,
    vaadin-date-time-picker-time-picker input,
    vaadin-time-picker input,
    vaadin-combo-box input,
    vaadin-multi-select-combo-box input,
    multiselect-combo-box input),
input:disabled:hover:not(vaadin-text-field input,
    vaadin-text-area input,
    vaadin-email-field input,
    vaadin-password-field input,
    vaadin-number-field input,
    vaadin-integer-field input,
    vaadin-date-picker input,
    vaadin-time-picker input,
    vaadin-date-time-picker-date-picker input,
    vaadin-date-time-picker-time-picker input,
    vaadin-combo-box input,
    vaadin-multi-select-combo-box input,
    multiselect-combo-box input),
textarea:disabled,
textarea:disabled:hover,
vaadin-text-field[disabled]::part(input-field),
vaadin-text-area[disabled]::part(input-field),
vaadin-email-field[disabled]::part(input-field),
vaadin-password-field[disabled]::part(input-field),
vaadin-number-field[disabled]::part(input-field),
vaadin-integer-field[disabled]::part(input-field),
vaadin-date-picker[disabled]::part(input-field),
vaadin-time-picker[disabled]::part(input-field),
vaadin-date-time-picker-date-picker[disabled]::part(input-field),
vaadin-date-time-picker-time-picker[disabled]::part(input-field),
vaadin-combo-box[disabled]::part(input-field),
vaadin-multi-select-combo-box[disabled]::part(input-field),
multiselect-combo-box[disabled]::part(input-field) {
    background-color: var(--kisters-style-input-disabled-background);
    border: var(--kisters-style-input-disabled-border);
    color: var(--kisters-style-input-disabled-color);
}

vaadin-text-field,
vaadin-text-area,
vaadin-email-field,
vaadin-password-field,
vaadin-number-field,
vaadin-integer-field,
vaadin-date-picker,
vaadin-time-picker,
vaadin-date-time-picker,
vaadin-date-time-picker-date-picker,
vaadin-date-time-picker-time-picker,
vaadin-combo-box,
vaadin-multi-select-combo-box,
multiselect-combo-box {
    padding: 0px;
    width: 100%;
    margin: 0px;
}

vaadin-text-field::part(input-field),
vaadin-email-field::part(input-field),
vaadin-password-field::part(input-field),
vaadin-date-picker::part(input-field),
vaadin-time-picker::part(input-field),
vaadin-date-time-picker-date-picker::part(input-field),
vaadin-date-time-picker-time-picker::part(input-field),
vaadin-combo-box::part(input-field) {
    border: var(--kisters-style-input-border);
    padding: 0px 12.5px;
    height: calc(var(--kisters-style-input-height) + 2px);
    margin-top: var(--kisters-style-input-margin);
}

vaadin-number-field::part(input-field),
vaadin-integer-field::part(input-field) {
    border: var(--kisters-style-input-border);
    height: calc(var(--kisters-style-input-height) + 2px);
    margin-top: var(--kisters-style-input-margin);
}

multiselect-combo-box::part(input-field) {
    border: var(--kisters-style-input-border);
    padding: 0px 12.5px;
    margin-top: var(--kisters-style-input-margin);
}
vaadin-multi-select-combo-box::part(input-field) {
    border: var(--kisters-style-input-border);
    padding: 0px 12.5px;
    min-height: calc(var(--kisters-style-input-height) + 2px);
    margin-top: var(--kisters-style-input-margin);
}

vaadin-text-field::part(label),
vaadin-text-area::part(label),
vaadin-email-field::part(label),
vaadin-password-field::part(label),
vaadin-number-field::part(label),
vaadin-date-picker::part(label),
vaadin-time-picker::part(label),
vaadin-date-time-picker-date-picker::part(label),
vaadin-date-time-picker-time-picker::part(label),
vaadin-combo-box::part(label),
vaadin-multi-select-combo-box::part(label),
multiselect-combo-box::part(label) {
    font-family: var(--kisters-style-font-family);
    font-size: var(--kisters-style-font-size-standard);
    font-weight: 500;
    padding-bottom: var(--metrics-spacing-xs);
}

vaadin-integer-field::part(input-field) {
    border: var(--kisters-style-input-border);
}

vaadin-number-field::part(decrease-button),
vaadin-number-field::part(increase-button),
vaadin-integer-field::part(decrease-button),
vaadin-integer-field::part(increase-button) {
    background-color: var(--color-surface-hover);
    border-radius: var(--kisters-style-border-radius);
    color: var(--color-text-highlight-1);
    height: calc(var(--kisters-style-input-height) - 5px);
    padding-top: 5px;
}

vaadin-text-area::part(input-field) {
    border: none;
    background-color: transparent;
    padding: 0px;
}

vaadin-text-field::part(error-message),
vaadin-text-area::part(error-message),
vaadin-email-field::part(error-message),
vaadin-password-field::part(error-message),
vaadin-number-field::part(error-message),
vaadin-date-picker::part(error-message),
vaadin-time-picker::part(error-message),
vaadin-date-time-picker-date-picker::part(error-message),
vaadin-date-time-picker-time-picker::part(error-message),
vaadin-combo-box::part(error-message),
vaadin-multi-select-combo-box::part(error-message),
multiselect-combo-box::part(error-message) {
    text-align: left;
}

textarea {
    background-color: var(--kisters-style-input-background);
    border: var(--kisters-style-input-border);
    border-radius: var(--kisters-style-border-radius);
    color: var(--kisters-style-input-text-color);
    font-size: var(--kisters-style-font-size-standard);
    font-family: var(--kisters-style-font-family);
    height: var(--kisters-style-input-text-area-height);
    margin-top: var(--kisters-style-input-margin);
    min-height: var(--kisters-style-input-text-area-height);
    padding: var(--kisters-style-input-text-area-padding);
}

input::placeholder, textarea::placeholder, [placeholder], *[placeholder] {
    opacity: 1;
    color: var(--color-text-secondary);
}

.invalid,
vaadin-text-field[invalid]::part(input-field),
vaadin-text-area[invalid]::part(input-field),
vaadin-email-field[invalid]::part(input-field),
vaadin-password-field[invalid]::part(input-field),
vaadin-number-field[invalid]::part(input-field),
vaadin-integer-field[invalid]::part(input-field),
vaadin-date-picker[invalid]::part(input-field),
vaadin-date-time-picker-date-picker[invalid]::part(input-field),
vaadin-date-time-picker-time-picker[invalid]::part(input-field),
vaadin-time-picker[invalid]::part(input-field),
vaadin-combo-box[invalid]::part(input-field),
vaadin-multi-select-combo-box[invalid]::part(input-field),
multiselect-combo-box[invalid]::part(input-field) {
    background-color: var(--kisters-style-invalid-background);
    border: var(--kisters-style-invalid-border);
    border-radius: var(--kisters-style-border-radius);
}

.invalid,
vaadin-text-field[invalid]::part(label),
vaadin-text-area[invalid]::part(label),
vaadin-email-field[invalid]::part(label),
vaadin-password-field[invalid]::part(label),
vaadin-number-field[invalid]::part(label),
vaadin-integer-field[invalid]::part(label),
vaadin-date-picker[invalid]::part(label),
vaadin-date-time-picker-date-picker[invalid]::part(label),
vaadin-date-time-picker-time-picker[invalid]::part(label),
vaadin-time-picker[invalid]::part(label),
vaadin-combo-box[invalid]::part(label),
vaadin-multi-select-combo-box[invalid]::part(label),
multiselect-combo-box[invalid]::part(label) {
    color: var(--kisters-style-invalid-color);
}

vaadin-tab {
    font-family: var(--kisters-style-font-family);
    font-style: normal;
    font-weight: 400;
}

vaadin-tab.primary {
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.15px;
    height: 50px;
}

vaadin-tab.secondary {
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 0.1px;
}

vaadin-tab.primary[selected],
vaadin-tab.secondary[selected] {
    color: var(--color-text-highlight-1);
}

vaadin-tab.primary[disabled],
vaadin-tab.secondary[disabled] {
    color: var(--color-text-tertiary);
}

vaadin-tab.primary[selected]::before,
vaadin-tab.primary[selected]::after,
vaadin-tab.secondary[selected]::before,
vaadin-tab.secondary[selected]::after {
    background-color: var(--color-surface-contrast);
    width: 100%;
    height: 2px;
}

vaadin-tab.primary[selected][orientation='vertical']::before,
vaadin-tab.primary[selected][orientation='vertical']::after,
vaadin-tab.secondary[selected][orientation='vertical']::before,
vaadin-tab.secondary[selected][orientation='vertical']::after {
    background-color: var(--color-surface-contrast);
    height: 100%;
    width: 2px;
}

vaadin-radio-button:hover {
    cursor: pointer;
}

vaadin-radio-button:not([checked])::part(radio) {
    background-color: var(--color-button-surface-off);
}