/**

* @license

* Copyright (c) 2017 - 2023 Vaadin Ltd.

* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/

*/

import './version.js';

import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';

import { addLumoGlobalStyles } from './global.js';

const style = css`

:host {

/* Border radius */

--lumo-border-radius-s: 0.25em; /* Checkbox, badge, date-picker year indicator, etc */

--lumo-border-radius-m: var(--lumo-border-radius, 0.25em); /* Button, text field, menu overlay, etc */

--lumo-border-radius-l: 0.5em; /* Dialog, notification, etc */

/* Shadow */

--lumo-box-shadow-xs: 0 1px 4px -1px var(--lumo-shade-50pct);

--lumo-box-shadow-s: 0 2px 4px -1px var(--lumo-shade-20pct), 0 3px 12px -1px var(--lumo-shade-30pct);

--lumo-box-shadow-m: 0 2px 6px -1px var(--lumo-shade-20pct), 0 8px 24px -4px var(--lumo-shade-40pct);

--lumo-box-shadow-l: 0 3px 18px -2px var(--lumo-shade-20pct), 0 12px 48px -6px var(--lumo-shade-40pct);

--lumo-box-shadow-xl: 0 4px 24px -3px var(--lumo-shade-20pct), 0 18px 64px -8px var(--lumo-shade-40pct);

/* Clickable element cursor */

--lumo-clickable-cursor: default;

}

`;

/**

* Default values for component-specific custom properties.

*/

const globals = css`

html {

/* Button */

--vaadin-button-background: var(--lumo-contrast-5pct);

--vaadin-button-border: none;

--vaadin-button-border-radius: var(--lumo-border-radius-m);

--vaadin-button-font-size: var(--lumo-font-size-m);

--vaadin-button-font-weight: 500;

--vaadin-button-height: var(--lumo-size-m);

--vaadin-button-margin: var(--lumo-space-xs) 0;

--vaadin-button-min-width: calc(var(--vaadin-button-height) * 2);

--vaadin-button-padding: 0 calc(var(--vaadin-button-height) / 3 + var(--lumo-border-radius-m) / 2);

--vaadin-button-text-color: var(--lumo-primary-text-color);

--vaadin-button-primary-background: var(--lumo-primary-color);

--vaadin-button-primary-border: none;

--vaadin-button-primary-font-weight: 600;

--vaadin-button-primary-text-color: var(--lumo-primary-contrast-color);

--vaadin-button-tertiary-background: transparent !important;

--vaadin-button-tertiary-text-color: var(--lumo-primary-text-color);

--vaadin-button-tertiary-font-weight: 500;

--vaadin-button-tertiary-padding: 0 calc(var(--vaadin-button-height) / 6);

/* Checkbox */

--vaadin-checkbox-background: var(--lumo-contrast-20pct);

--vaadin-checkbox-background-hover: var(--lumo-contrast-30pct);

--vaadin-checkbox-border-radius: var(--lumo-border-radius-s);

--vaadin-checkbox-checkmark-char: var(--lumo-icons-checkmark);

--vaadin-checkbox-checkmark-char-indeterminate: '';

--vaadin-checkbox-checkmark-color: var(--lumo-primary-contrast-color);

--vaadin-checkbox-checkmark-size: calc(var(--vaadin-checkbox-size) + 2px);

--vaadin-checkbox-label-color: var(--lumo-body-text-color);

--vaadin-checkbox-label-font-size: var(--lumo-font-size-m);

--vaadin-checkbox-label-padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs) var(--lumo-space-xs);

--vaadin-checkbox-size: calc(var(--lumo-size-m) / 2);

/* Radio button */

--vaadin-radio-button-background: var(--lumo-contrast-20pct);

--vaadin-radio-button-background-hover: var(--lumo-contrast-30pct);

--vaadin-radio-button-dot-color: var(--lumo-primary-contrast-color);

--vaadin-radio-button-dot-size: 3px;

--vaadin-radio-button-label-color: var(--lumo-body-text-color);

--vaadin-radio-button-label-font-size: var(--lumo-font-size-m);

--vaadin-radio-button-label-padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs)

var(--lumo-space-xs);

--vaadin-radio-button-size: calc(var(--lumo-size-m) / 2);

--vaadin-selection-color: var(--lumo-primary-color);

--vaadin-selection-color-text: var(--lumo-primary-text-color);

--vaadin-input-field-border-radius: var(--lumo-border-radius-m);

--vaadin-focus-ring-color: var(--lumo-primary-color-50pct);

--vaadin-focus-ring-width: 2px;

/* Label */

--vaadin-input-field-label-color: var(--lumo-secondary-text-color);

--vaadin-input-field-focused-label-color: var(--lumo-primary-text-color);

--vaadin-input-field-hovered-label-color: var(--lumo-body-text-color);

--vaadin-input-field-label-font-size: var(--lumo-font-size-s);

--vaadin-input-field-label-font-weight: 500;

/* Helper */

--vaadin-input-field-helper-color: var(--lumo-secondary-text-color);

--vaadin-input-field-helper-font-size: var(--lumo-font-size-xs);

--vaadin-input-field-helper-font-weight: 400;

--vaadin-input-field-helper-spacing: 0.4em;

/* Error message */

--vaadin-input-field-error-color: var(--lumo-error-text-color);

--vaadin-input-field-error-font-size: var(--lumo-font-size-xs);

--vaadin-input-field-error-font-weight: 400;

/* Input field */

--vaadin-input-field-background: var(--lumo-contrast-10pct);

--vaadin-input-field-icon-color: var(--lumo-contrast-60pct);

--vaadin-input-field-icon-size: var(--lumo-icon-size-m);

--vaadin-input-field-invalid-background: var(--lumo-error-color-10pct);

--vaadin-input-field-invalid-hover-highlight: var(--lumo-error-color-50pct);

--vaadin-input-field-height: var(--lumo-size-m);

--vaadin-input-field-hover-highlight: var(--lumo-contrast-50pct);

--vaadin-input-field-placeholder-color: var(--lumo-secondary-text-color);

--vaadin-input-field-readonly-border: 1px dashed var(--lumo-contrast-30pct);

--vaadin-input-field-value-color: var(--lumo-body-text-color);

--vaadin-input-field-value-font-size: var(--lumo-font-size-m);

--vaadin-input-field-value-font-weight: 400;

}

`;

addLumoGlobalStyles('style-props', style);

export { globals, style };