smart-webcomponents-community/source/styles/material/light/smart.material.black.css

Web Components & Custom Elements Community Version

:root {
  --smart-white: #ffffff;
  --smart-black: #000000;
  --smart-base: #dfe5ec;
  --smart-base-50: #f8fafb;
  --smart-base-100: #f3f6f9;
  --smart-base-200: #e3eaf2;
  --smart-base-300: #dfe5ec;
  --smart-base-400: #dbe0e6;
  --smart-base-500: #d7dbe0;
  --smart-base-600: #c6cbd2;
  --smart-base-700: #74787e;
  --smart-base-800: #45494f;
  --smart-base-900: #1b1d20;
  --smart-base-light: #f3f6f9;
  --smart-base-lighter: #ffffff;
  --smart-base-dark: #45494f;
  --smart-base-darker: #1b1d20;
  --smart-primary: #000000;
  --smart-primary-rgb: 0, 0, 0;
  --smart-primary-light: #9e9e9e;
  --smart-primary-lighter: rgba(0, 0, 0, 0.13);
  --smart-primary-dark: #4f4f4f;
  --smart-primary-darker: #000000;
  --smart-secondary: #5b6371;
  --smart-secondary-light: #c2c7d1;
  --smart-secondary-lighter: rgba(91, 99, 113, 0.13);
  --smart-secondary-dark: #8a92a3;
  --smart-secondary-darker: #1f242c;
  --smart-info: #085786;
  --smart-info-light: #aadaff;
  --smart-info-lighter: rgba(170, 218, 255, 0.5);
  --smart-info-dark: #086791;
  --smart-info-darker: #002d41;
  --smart-success: #3e9108;
  --smart-success-light: #c6ffaa;
  --smart-success-lighter: rgba(198, 255, 170, 0.5);
  --smart-success-dark: #479108;
  --smart-success-darker: #1e4100;
  --smart-warning: #e8e971;
  --smart-warning-light: #f9ffaa;
  --smart-warning-lighter: rgba(249, 255, 170, 0.5);
  --smart-warning-dark: #918908;
  --smart-warning-darker: #413d00;
  --smart-error: #d35153;
  --smart-error-light: #ffaeaa;
  --smart-error-lighter: rgba(255, 174, 170, 0.5);
  --smart-error-dark: #910813;
  --smart-error-darker: #410005;
  --smart-on-base: #1b1d20;
  --smart-on-base-light: #1b1d20;
  --smart-on-base-lighter: #1b1d20;
  --smart-on-base-dark: #ffffff;
  --smart-on-base-darker: #f8fafb;
  --smart-on-primary: #ffffff;
  --smart-on-primary-light: #00215d;
  --smart-on-primary-lighter: #00215d;
  --smart-on-primary-dark: var(#000000);
  --smart-on-primary-darker: #bcd8ff;
  --smart-on-secondary: #ffffff;
  --smart-on-secondary-light: #19202b;
  --smart-on-secondary-lighter: #19202b;
  --smart-on-secondary-dark: #ffffff;
  --smart-on-secondary-darker: #c2ccdc;
  --smart-on-info: #ffffff;
  --smart-on-info-light: #002d41;
  --smart-on-info-lighter: #086791;
  --smart-on-info-dark: #ffffff;
  --smart-on-info-darker: #aadaff;
  --smart-on-success: #ffffff;
  --smart-on-success-light: #1e4100;
  --smart-on-success-lighter: #1e4100;
  --smart-on-success-dark: #ffffff;
  --smart-on-success-darker: #c6ffaa;
  --smart-on-warning: #1b1d20;
  --smart-on-warning-light: #413d00;
  --smart-on-warning-lighter: #413d00;
  --smart-on-warning-dark: #ffffff;
  --smart-on-warning-darker: #f9ffaa;
  --smart-on-error: #ffffff;
  --smart-on-error-light: #410005;
  --smart-on-error-lighter: #410005;
  --smart-on-error-dark: #ffffff;
  --smart-on-error-darker: #ffaeaa;
  --smart-border-width: 1px;
  --smart-root-font-size: 16px;
  --smart-body-font-size: 1rem;
  --smart-body-line-height: 1.5;
  --smart-text-font-family: Roboto, sans-serif;
  --smart-outline-offset: 2px;
  --smart-outline-width: 2px;
  --smart-border-radius: 4px;
  --smart-border-radius-0: 0;
  --smart-border-radius-1: 0.25rem;
  --smart-border-radius-2: 0.5rem;
  --smart-border-radius-3: 0.75rem;
  --smart-border-radius-4: 1rem;
  --smart-border-radius-5: 1.25rem;
  --smart-border-radius-6: 1.5rem;
  --smart-border-radius-7: 1.75rem;
  --smart-border-radius-8: 2rem;
  --smart-border-radius-9: 2.25rem;
  --smart-border-radius-10: 2.5rem;
}

:root {
  --smart-body-background-color: var(--smart-base-100);
  --smart-outline-color: var(--smart-primary);
  --smart-text-title-color: var(--smart-base-900);
  --smart-text-color: var(--smart-base-900);
  --smart-text-secondary-color: var(--smart-base-800);
  --smart-text-tertiary-color: var(--smart-base-700);
  --smart-text-disabled-color: var(--smart-base-600);
  --smart-text-contrast-color: var(--smart-white);
  --smart-base-background-color: var(--smart-base-50);
  --smart-base-background-color-dark: var(--smart-base-900);
  --smart-border-normal: var(--smart-base-400);
  --smart-border-hover: var(--smart-base-700);
  --smart-border-focus: var(--smart-primary);
  --smart-border-disabled: var(--smart-base-400);
  --smart-elevation-0: none;
  --smart-elevation-1: 0px 1px 2px rgba(69, 73, 79, 0.3), 0px 1px 3px 1px rgba(69, 73, 79, 0.15);
  --smart-elevation-2: 0px 1px 2px rgba(69, 73, 79, 0.3), 0px 2px 6px 2px rgba(69, 73, 79, 0.15);
  --smart-elevation-3: 0px 4px 8px 3px rgba(69, 73, 79, 0.15), 0px 1px 3px rgba(69, 73, 79, 0.3);
  --smart-elevation-4: 0px 6px 10px 4px rgba(69, 73, 79, 0.15), 0px 2px 3px rgba(69, 73, 79, 0.3);
  --smart-elevation-5: 0px 8px 12px 6px rgba(69, 73, 79, 0.15), 0px 4px 4px rgba(69, 73, 79, 0.3);
  --smart-elevation-6: 0px 12px 16px 6px rgba(69, 73, 79, 0.15), 0px 4px 6px rgba(69, 73, 79, 0.3);
  --smart-elevation-7: 0px 16px 20px 6px rgba(69, 73, 79, 0.15), 0px 6px 6px rgba(69, 73, 79, 0.3);
  --smart-elevation-8: 0px 20px 24px 6px rgba(69, 73, 79, 0.15), 0px 6px 8px rgba(69, 73, 79, 0.3);
  --smart-elevation-9: 0px 24px 28px 6px rgba(69, 73, 79, 0.15), 0px 8px 8px rgba(69, 73, 79, 0.3);
  --smart-elevation-10: 0px 28px 32px 6px rgba(69, 73, 79, 0.15), 0px 8px 10px rgba(69, 73, 79, 0.3);
  --smart-surface: var(--smart-base-background-color);
  --smart-border: var(--smart-border-normal);
  --smart-background: var(--smart-white);
  --smart-background-color: var(--smart-text-color);
  --smart-secondary-background: var(--smart-base-100);
  --smart-secondary-background-alt: var(--smart-base-200);
  --smart-warning-color: var(--smart-on-warning);
  --smart-error-color: var(--smart-on-error);
  --smart-success-color: var(--smart-on-success);
  --smart-info-color: var(--smart-on-info);
  --smart-primary-color: var(--smart-on-primary);
  --smart-input-font-size: var(--smart-body-font-size);
  --smart-ui-state-hover: var(--smart-base-200);
  --smart-ui-state-color-hover: var(--smart-base-800);
  --smart-ui-state-border-hover: var(--smart-ui-state-hover);
  --smart-ui-state-focus: var(--smart-base-500);
  --smart-ui-state-color-focus: var(--smart-base-900);
  --smart-ui-state-border-focus: var(--smart-ui-state-focus);
  --smart-ui-state-active: var(--smart-primary);
  --smart-ui-state-color-active: var(--smart-on-primary);
  --smart-ui-state-border-active: var(--smart-primary);
  --smart-ui-state-selected: var(--smart-secondary-lighter);
  --smart-ui-state-color-selected: var(--smart-on-secondary-lighter);
  --smart-ui-state-border-selected: var(--smart-secondary-lighter);
  --smart-ui-state-secondary-hover: var(--smart-base-300);
  --smart-ui-state-color-secondary-hover: var(--smart-background-color);
  --smart-ui-state-border-secondary-hover: var(--smart-border-hover);
  /* Window styles */
  --smart-window-background-color: var(--smart-secondary-background-alt);
  --smart-window-header-padding: 1.75rem;
  --smart-window-header-background: var(--smart-secondary-background-alt);
  --smart-window-footer-background: var(--smart-secondary-background-alt);
  --smart-window-footer-button-width: 100px;
  --smart-window-title-font-size: 1.25rem;
  --smart-window-header-height: 3.5rem;
  /* Accordion item styles */
  --smart-accordion-item-font-size: 1rem;
  --smart-accordion-item-font-weight: 500;
  /* The maximum height of the drop-down menu of the input component. */
  /* ScrollBar's default height. */
  --smart-scroll-bar-background: var(--smart-surface);
  /* default ScrollBar's background color. */
  --smart-scroll-bar-track-background: var(--smart-scroll-bar-background);
  --smart-scroll-bar-border: var(--smart-surface);
  /* The border color of the ScrollBar */
  --smart-scroll-bar-thumb-border-top-right-radius: 8px;
  /* default ScrollBar's top-right border radius. */
  --smart-scroll-bar-thumb-border-top-left-radius: 8px;
  /* default ScrollBar's top-left border radius. */
  --smart-scroll-bar-thumb-border-bottom-left-radius: 8px;
  /* default ScrollBar's bottom-left border radius. */
  --smart-scroll-bar-thumb-border-bottom-right-radius: 8px;
  /* default ScrollBar's bottom-right border radius. */
  --smart-scroll-bar-thumb-background: var(--smart-base-400);
  /* The color of the ScrollBar's thumb. */
  --smart-scroll-bar-thumb-border: transparent;
  /* The color of the ScrollBar's thumb border. */
  --smart-scroll-bar-thumb-size: 100%;
  /* The size of the ScrollBar's thumb. */
  --smart-scroll-bar-thumb-padding: 1px;
  /* The padding of the ScrollBar's thumb. */
  --smart-scroll-bar-thumb-background-hover: var(--smart-base-300);
  /* The background color of the ScrollBar's thumb in hover state. */
  --smart-scroll-bar-thumb-border-hover: transparent;
  /* The border color of the ScrollBar's thumb in hover state. */
  --smart-scroll-bar-thumb-background-active: var(--smart-base-400);
  /* The background color of the ScrollBar's thumb in active state. */
  --smart-scroll-bar-thumb-border-active: transparent;
  /* The border color of the ScrollBar's thumb in active state. */
  --smart-scroll-bar-button-background: var(--smart-surface);
  /* The background color of ScrollBar's navigation buttons. */
  --smart-scroll-bar-button-border: var(--smart-surface);
  /* The border color of ScrollBar's navigation buttons. */
  --smart-scroll-bar-button-color: var(--smart-on-surface);
  /* The color of ScrollBar's navigation buttons. */
  --smart-scroll-bar-button-background-hover: var(--smart-base-300);
  /* The background color of the hovered ScrollBar's buttons. */
  --smart-scroll-bar-button-border-hover: var(--smart-surface);
  /* The border color of the hovered ScrollBar's buttons. */
  --smart-scroll-bar-button-color-hover: var(--smart-on-surface);
  /* The color of the hovered ScrollBar's buttons. */
  --smart-scroll-bar-button-background-active: var(--smart-base-400);
  /* The background color of the ScrollBar's buttons in active state. */
  --smart-scroll-bar-button-border-active: var(--smart-surface);
  /* The border color of the ScrollBar's buttons in active state. */
  --smart-scroll-bar-button-color-active: var(--smart-on-surface);
  /* The color of the ScrollBar's buttons in active state. */
}

smart-calendar .smart-calendar-week-title {
  color: var(--smart-base-700);
}

smart-button,
smart-toggle-button,
smart-repeat-button,
.smart-button-element {
  font-weight: 500;
  text-transform: none;
  border-radius: var(--smart-border-radius-8);
  --smart-border-radius: var(--smart-border-radius-8);
  text-size-adjust: 100%;
}
smart-button.raised,
smart-toggle-button.raised,
smart-repeat-button.raised,
.smart-button-element.raised {
  box-shadow: var(--smart-elevation-1);
}
smart-button.raised[hover],
smart-toggle-button.raised[hover],
smart-repeat-button.raised[hover],
.smart-button-element.raised[hover] {
  box-shadow: var(--smart-elevation-2);
}
smart-button.brighter,
smart-toggle-button.brighter,
smart-repeat-button.brighter,
.smart-button-element.brighter {
  --smart-primary: var(--smart-primary-lighter);
  --smart-primary-color: var(--smart-on-primary-lighter);
  --smart-secondary: var(--smart-secondary-lighter);
  --smart-secondary-color: var(--smart-on-secondary-lighter);
  --smart-info: var(--smart-info-lighter);
  --smart-info-color: var(--smart-on-info-lighter);
  --smart-success: var(--smart-success-lighter);
  --smart-success-color: var(--smart-on-success-lighter);
  --smart-error: var(--smart-error-lighter);
  --smart-error-color: var(--smart-on-error-lighter);
  --smart-warning: var(--smart-warning-lighter);
  --smart-warning-color: var(--smart-on-warning-lighter);
}
smart-button.day,
smart-toggle-button.day,
smart-repeat-button.day,
.smart-button-element.day {
  --smart-primary: var(--smart-primary-light);
  --smart-primary-color: var(--smart-on-primary-light);
  --smart-secondary: var(--smart-secondary-light);
  --smart-secondary-color: var(--smart-on-secondary-light);
  --smart-info: var(--smart-info-light);
  --smart-info-color: var(--smart-on-info-light);
  --smart-success: var(--smart-success-light);
  --smart-success-color: var(--smart-on-success-light);
  --smart-error: var(--smart-error-light);
  --smart-error-color: var(--smart-on-error-light);
  --smart-warning: var(--smart-warning-light);
  --smart-warning-color: var(--smart-on-warning-light);
}
smart-button.night,
smart-toggle-button.night,
smart-repeat-button.night,
.smart-button-element.night {
  --smart-primary: var(--smart-primary-dark);
  --smart-primary-color: var(--smart-on-primary-dark);
  --smart-secondary: var(--smart-secondary-dark);
  --smart-secondary-color: var(--smart-on-secondary-dark);
  --smart-info: var(--smart-info-dark);
  --smart-info-color: var(--smart-on-info-dark);
  --smart-success: var(--smart-success-dark);
  --smart-success-color: var(--smart-on-success-dark);
  --smart-error: var(--smart-error-dark);
  --smart-error-color: var(--smart-on-error-dark);
  --smart-warning: var(--smart-warning-dark);
  --smart-warning-color: var(--smart-on-warning-dark);
}
smart-button.deeper,
smart-toggle-button.deeper,
smart-repeat-button.deeper,
.smart-button-element.deeper {
  --smart-primary: var(--smart-primary-darker);
  --smart-primary-color: var(--smart-on-primary-darker);
  --smart-secondary: var(--smart-secondary-darker);
  --smart-secondary-color: var(--smart-on-secondary-darker);
  --smart-info: var(--smart-info-darker);
  --smart-info-color: var(--smart-on-info-darker);
  --smart-success: var(--smart-success-darker);
  --smart-success-color: var(--smart-on-success-darker);
  --smart-error: var(--smart-error-darker);
  --smart-error-color: var(--smart-on-error-darker);
  --smart-warning: var(--smart-warning-darker);
  --smart-warning-color: var(--smart-on-warning-darker);
}
smart-button.outlined,
smart-toggle-button.outlined,
smart-repeat-button.outlined,
.smart-button-element.outlined {
  border-width: 1px;
  box-shadow: none;
}
smart-button.outlined[hover],
smart-toggle-button.outlined[hover],
smart-repeat-button.outlined[hover],
.smart-button-element.outlined[hover] {
  box-shadow: none;
}
smart-button.flat,
smart-toggle-button.flat,
smart-repeat-button.flat,
.smart-button-element.flat {
  box-shadow: none;
}
smart-button.flat[hover],
smart-toggle-button.flat[hover],
smart-repeat-button.flat[hover],
.smart-button-element.flat[hover] {
  box-shadow: none;
}
smart-button.flat,
smart-toggle-button.flat,
smart-repeat-button.flat,
.smart-button-element.flat {
  color: var(--smart-background-color);
  background: var(--smart-background);
  border-color: var(--smart-border);
}
smart-button.flat[hover],
smart-toggle-button.flat[hover],
smart-repeat-button.flat[hover],
.smart-button-element.flat[hover] {
  color: var(--smart-ui-state-color-hover);
  border-color: var(--smart-ui-state-border-hover);
  background-color: var(--smart-ui-state-hover);
  transition: background-color 100ms linear, box-shadow 280ms ease-in-out;
  opacity: var(--smart-button-opacity-hover);
}
smart-button.flat[focus],
smart-toggle-button.flat[focus],
smart-repeat-button.flat[focus],
.smart-button-element.flat[focus] {
  color: var(--smart-ui-state-color-focus);
  border-color: var(--smart-ui-state-border-focus);
  background-color: var(--smart-ui-state-focus);
  opacity: var(--smart-button-opacity-focus);
}
smart-button.flat[active],
smart-toggle-button.flat[active],
smart-repeat-button.flat[active],
.smart-button-element.flat[active] {
  color: var(--smart-ui-state-color-active);
  border-color: var(--smart-ui-state-border-active);
  background-color: var(--smart-ui-state-active);
  transition: background-color 100ms linear, box-shadow 280ms ease-in-out;
  opacity: var(--smart-button-opacity-active);
}

smart-password-input.outlined {
  --smart-font-size: var(--smart-input-font-size);
  --smart-editor-height: 36px;
  --smart-text-box-default-height: 36px;
  --smart-list-item-height: 36px;
  --smart-ui-state-hover: var(--smart-ui-state-secondary-hover);
  --smart-ui-state-color-hover: var(--smart-ui-state-color-secondary-hover);
  --smart-ui-state-border-hover: var(--smart-ui-state-border-secondary-hover);
}
smart-password-input.outlined[hover]:not(.smart-drop-down) {
  --smart-border: var(--smart-border-hover);
}
smart-password-input.outlined .smart-drop-down smart-list-box[focus] {
  box-shadow: none;
}
smart-password-input.outlined[focus], smart-password-input.outlined[opened], smart-password-input.outlined[active] {
  --smart-outline: var(--smart-primary);
  --smart-ui-state-active: var(--smart-secondary-background) !important;
  --smart-ui-state-color-active: var(--smart-background-color) !important;
  --smart-ui-state-border-active: var(--smart-primary) !important;
  border-color: var(--smart-primary) !important;
}
smart-password-input.outlined[hover] {
  --smart-border: var(--smart-ui-state-border-hover);
}
smart-password-input.outlined input {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-right: none !important;
}
smart-password-input.outlined .smart-drop-down-button {
  border-right: 1px solid var(--smart-border);
  border-bottom: 1px solid var(--smart-border);
}
smart-password-input.outlined .smart-drop-down-button:hover {
  border-color: var(--smart-border) !important;
}
smart-password-input.outlined[focus] .smart-drop-down-button {
  --smart-border: var(--smart-primary) !important;
  border-color: var(--smart-primary) !important;
}

smart-check-box.smart-toggle-box,
smart-radio-button.smart-toggle-box {
  --smart-font-size: var(--smart-input-font-size);
  --smart-border-width: 2px;
  --smart-border-radius: var(--smart-border-radius-1);
  --smart-check-box-default-size: 14px;
  --smart-radio-button-default-size: 14px;
}
smart-check-box.smart-toggle-box .smart-input:hover,
smart-radio-button.smart-toggle-box .smart-input:hover {
  --smart-ui-state-hover: var(--smart-ui-state-secondary-hover);
  --smart-ui-state-color-hover: var(--smart-ui-state-color-secondary-hover);
  --smart-ui-state-border-hover: var(--smart-ui-state-border-secondary-hover);
}

smart-tree,
smart-list-box {
  --smart-check-box-default-size: 14px;
  --smart-radio-button-default-size: 14px;
}

smart-tree:hover,
smart-list-box:hover {
  border-color: var(--smart-border-hover);
}

.smart-tree .smart-tree-item-label-element > span {
  padding: 7px 10px;
}

smart-tree:not(.outlined),
smart-menu:not(.outlined),
smart-date-time-picker:not(.outlined),
smart-date-input:not(.outlined),
smart-time-input:not(.outlined),
smart-date-range-input:not(.outlined),
smart-drop-down-button:not(.outlined),
smart-drop-down-list:not(.outlined),
smart-combo-box:not(.outlined),
smart-list-box:not(.outlined),
smart-number-input:not(.outlined),
smart-numeric-text-box:not(.outlined),
smart-multi-input:not(.outlined),
smart-check-input:not(.outlined),
smart-multi-combo-input:not(.outlined),
smart-input:not(.outlined),
smart-text-box:not(.outlined),
smart-color-input:not(.outlined),
smart-color-picker:not(.outlined),
smart-masked-text-box:not(.outlined),
smart-password-text-box:not(.outlined),
smart-password-input:not(.outlined),
smart-text-area:not(.outlined) {
  --smart-font-size: var(--smart-input-font-size);
  --smart-numeric-text-box-default-height: 36px;
  --smart-editor-height: 36px;
  --smart-text-box-default-height: 36px;
  --smart-list-item-height: 36px;
  --smart-ui-state-hover: var(--smart-ui-state-secondary-hover);
  --smart-ui-state-color-hover: var(--smart-ui-state-color-secondary-hover);
  --smart-ui-state-border-hover: var(--smart-ui-state-border-secondary-hover);
}
smart-tree:not(.outlined)[hover]:not(.smart-drop-down),
smart-menu:not(.outlined)[hover]:not(.smart-drop-down),
smart-date-time-picker:not(.outlined)[hover]:not(.smart-drop-down),
smart-date-input:not(.outlined)[hover]:not(.smart-drop-down),
smart-time-input:not(.outlined)[hover]:not(.smart-drop-down),
smart-date-range-input:not(.outlined)[hover]:not(.smart-drop-down),
smart-drop-down-button:not(.outlined)[hover]:not(.smart-drop-down),
smart-drop-down-list:not(.outlined)[hover]:not(.smart-drop-down),
smart-combo-box:not(.outlined)[hover]:not(.smart-drop-down),
smart-list-box:not(.outlined)[hover]:not(.smart-drop-down),
smart-number-input:not(.outlined)[hover]:not(.smart-drop-down),
smart-numeric-text-box:not(.outlined)[hover]:not(.smart-drop-down),
smart-multi-input:not(.outlined)[hover]:not(.smart-drop-down),
smart-check-input:not(.outlined)[hover]:not(.smart-drop-down),
smart-multi-combo-input:not(.outlined)[hover]:not(.smart-drop-down),
smart-input:not(.outlined)[hover]:not(.smart-drop-down),
smart-text-box:not(.outlined)[hover]:not(.smart-drop-down),
smart-color-input:not(.outlined)[hover]:not(.smart-drop-down),
smart-color-picker:not(.outlined)[hover]:not(.smart-drop-down),
smart-masked-text-box:not(.outlined)[hover]:not(.smart-drop-down),
smart-password-text-box:not(.outlined)[hover]:not(.smart-drop-down),
smart-password-input:not(.outlined)[hover]:not(.smart-drop-down),
smart-text-area:not(.outlined)[hover]:not(.smart-drop-down) {
  --smart-border: var(--smart-border-hover);
}
smart-tree:not(.outlined) .smart-drop-down,
smart-menu:not(.outlined) .smart-drop-down,
smart-date-time-picker:not(.outlined) .smart-drop-down,
smart-date-input:not(.outlined) .smart-drop-down,
smart-time-input:not(.outlined) .smart-drop-down,
smart-date-range-input:not(.outlined) .smart-drop-down,
smart-drop-down-button:not(.outlined) .smart-drop-down,
smart-drop-down-list:not(.outlined) .smart-drop-down,
smart-combo-box:not(.outlined) .smart-drop-down,
smart-list-box:not(.outlined) .smart-drop-down,
smart-number-input:not(.outlined) .smart-drop-down,
smart-numeric-text-box:not(.outlined) .smart-drop-down,
smart-multi-input:not(.outlined) .smart-drop-down,
smart-check-input:not(.outlined) .smart-drop-down,
smart-multi-combo-input:not(.outlined) .smart-drop-down,
smart-input:not(.outlined) .smart-drop-down,
smart-text-box:not(.outlined) .smart-drop-down,
smart-color-input:not(.outlined) .smart-drop-down,
smart-color-picker:not(.outlined) .smart-drop-down,
smart-masked-text-box:not(.outlined) .smart-drop-down,
smart-password-text-box:not(.outlined) .smart-drop-down,
smart-password-input:not(.outlined) .smart-drop-down,
smart-text-area:not(.outlined) .smart-drop-down {
  --smart-border: var(--smart-base);
}
smart-tree:not(.outlined) smart-menu-item[hover],
smart-tree:not(.outlined) smart-tree-item[hover],
smart-tree:not(.outlined) smart-tree-item:hover,
smart-tree:not(.outlined) smart-tree-items-group:hover,
smart-tree:not(.outlined) smart-list-item[hover],
smart-menu:not(.outlined) smart-menu-item[hover],
smart-menu:not(.outlined) smart-tree-item[hover],
smart-menu:not(.outlined) smart-tree-item:hover,
smart-menu:not(.outlined) smart-tree-items-group:hover,
smart-menu:not(.outlined) smart-list-item[hover],
smart-date-time-picker:not(.outlined) smart-menu-item[hover],
smart-date-time-picker:not(.outlined) smart-tree-item[hover],
smart-date-time-picker:not(.outlined) smart-tree-item:hover,
smart-date-time-picker:not(.outlined) smart-tree-items-group:hover,
smart-date-time-picker:not(.outlined) smart-list-item[hover],
smart-date-input:not(.outlined) smart-menu-item[hover],
smart-date-input:not(.outlined) smart-tree-item[hover],
smart-date-input:not(.outlined) smart-tree-item:hover,
smart-date-input:not(.outlined) smart-tree-items-group:hover,
smart-date-input:not(.outlined) smart-list-item[hover],
smart-time-input:not(.outlined) smart-menu-item[hover],
smart-time-input:not(.outlined) smart-tree-item[hover],
smart-time-input:not(.outlined) smart-tree-item:hover,
smart-time-input:not(.outlined) smart-tree-items-group:hover,
smart-time-input:not(.outlined) smart-list-item[hover],
smart-date-range-input:not(.outlined) smart-menu-item[hover],
smart-date-range-input:not(.outlined) smart-tree-item[hover],
smart-date-range-input:not(.outlined) smart-tree-item:hover,
smart-date-range-input:not(.outlined) smart-tree-items-group:hover,
smart-date-range-input:not(.outlined) smart-list-item[hover],
smart-drop-down-button:not(.outlined) smart-menu-item[hover],
smart-drop-down-button:not(.outlined) smart-tree-item[hover],
smart-drop-down-button:not(.outlined) smart-tree-item:hover,
smart-drop-down-button:not(.outlined) smart-tree-items-group:hover,
smart-drop-down-button:not(.outlined) smart-list-item[hover],
smart-drop-down-list:not(.outlined) smart-menu-item[hover],
smart-drop-down-list:not(.outlined) smart-tree-item[hover],
smart-drop-down-list:not(.outlined) smart-tree-item:hover,
smart-drop-down-list:not(.outlined) smart-tree-items-group:hover,
smart-drop-down-list:not(.outlined) smart-list-item[hover],
smart-combo-box:not(.outlined) smart-menu-item[hover],
smart-combo-box:not(.outlined) smart-tree-item[hover],
smart-combo-box:not(.outlined) smart-tree-item:hover,
smart-combo-box:not(.outlined) smart-tree-items-group:hover,
smart-combo-box:not(.outlined) smart-list-item[hover],
smart-list-box:not(.outlined) smart-menu-item[hover],
smart-list-box:not(.outlined) smart-tree-item[hover],
smart-list-box:not(.outlined) smart-tree-item:hover,
smart-list-box:not(.outlined) smart-tree-items-group:hover,
smart-list-box:not(.outlined) smart-list-item[hover],
smart-number-input:not(.outlined) smart-menu-item[hover],
smart-number-input:not(.outlined) smart-tree-item[hover],
smart-number-input:not(.outlined) smart-tree-item:hover,
smart-number-input:not(.outlined) smart-tree-items-group:hover,
smart-number-input:not(.outlined) smart-list-item[hover],
smart-numeric-text-box:not(.outlined) smart-menu-item[hover],
smart-numeric-text-box:not(.outlined) smart-tree-item[hover],
smart-numeric-text-box:not(.outlined) smart-tree-item:hover,
smart-numeric-text-box:not(.outlined) smart-tree-items-group:hover,
smart-numeric-text-box:not(.outlined) smart-list-item[hover],
smart-multi-input:not(.outlined) smart-menu-item[hover],
smart-multi-input:not(.outlined) smart-tree-item[hover],
smart-multi-input:not(.outlined) smart-tree-item:hover,
smart-multi-input:not(.outlined) smart-tree-items-group:hover,
smart-multi-input:not(.outlined) smart-list-item[hover],
smart-check-input:not(.outlined) smart-menu-item[hover],
smart-check-input:not(.outlined) smart-tree-item[hover],
smart-check-input:not(.outlined) smart-tree-item:hover,
smart-check-input:not(.outlined) smart-tree-items-group:hover,
smart-check-input:not(.outlined) smart-list-item[hover],
smart-multi-combo-input:not(.outlined) smart-menu-item[hover],
smart-multi-combo-input:not(.outlined) smart-tree-item[hover],
smart-multi-combo-input:not(.outlined) smart-tree-item:hover,
smart-multi-combo-input:not(.outlined) smart-tree-items-group:hover,
smart-multi-combo-input:not(.outlined) smart-list-item[hover],
smart-input:not(.outlined) smart-menu-item[hover],
smart-input:not(.outlined) smart-tree-item[hover],
smart-input:not(.outlined) smart-tree-item:hover,
smart-input:not(.outlined) smart-tree-items-group:hover,
smart-input:not(.outlined) smart-list-item[hover],
smart-text-box:not(.outlined) smart-menu-item[hover],
smart-text-box:not(.outlined) smart-tree-item[hover],
smart-text-box:not(.outlined) smart-tree-item:hover,
smart-text-box:not(.outlined) smart-tree-items-group:hover,
smart-text-box:not(.outlined) smart-list-item[hover],
smart-color-input:not(.outlined) smart-menu-item[hover],
smart-color-input:not(.outlined) smart-tree-item[hover],
smart-color-input:not(.outlined) smart-tree-item:hover,
smart-color-input:not(.outlined) smart-tree-items-group:hover,
smart-color-input:not(.outlined) smart-list-item[hover],
smart-color-picker:not(.outlined) smart-menu-item[hover],
smart-color-picker:not(.outlined) smart-tree-item[hover],
smart-color-picker:not(.outlined) smart-tree-item:hover,
smart-color-picker:not(.outlined) smart-tree-items-group:hover,
smart-color-picker:not(.outlined) smart-list-item[hover],
smart-masked-text-box:not(.outlined) smart-menu-item[hover],
smart-masked-text-box:not(.outlined) smart-tree-item[hover],
smart-masked-text-box:not(.outlined) smart-tree-item:hover,
smart-masked-text-box:not(.outlined) smart-tree-items-group:hover,
smart-masked-text-box:not(.outlined) smart-list-item[hover],
smart-password-text-box:not(.outlined) smart-menu-item[hover],
smart-password-text-box:not(.outlined) smart-tree-item[hover],
smart-password-text-box:not(.outlined) smart-tree-item:hover,
smart-password-text-box:not(.outlined) smart-tree-items-group:hover,
smart-password-text-box:not(.outlined) smart-list-item[hover],
smart-password-input:not(.outlined) smart-menu-item[hover],
smart-password-input:not(.outlined) smart-tree-item[hover],
smart-password-input:not(.outlined) smart-tree-item:hover,
smart-password-input:not(.outlined) smart-tree-items-group:hover,
smart-password-input:not(.outlined) smart-list-item[hover],
smart-text-area:not(.outlined) smart-menu-item[hover],
smart-text-area:not(.outlined) smart-tree-item[hover],
smart-text-area:not(.outlined) smart-tree-item:hover,
smart-text-area:not(.outlined) smart-tree-items-group:hover,
smart-text-area:not(.outlined) smart-list-item[hover] {
  --smart-ui-state-border-hover: var(--smart-ui-state-hover) !important;
}
smart-tree:not(.outlined).smart-input[focus]:not(.underlined),
smart-menu:not(.outlined).smart-input[focus]:not(.underlined),
smart-date-time-picker:not(.outlined).smart-input[focus]:not(.underlined),
smart-date-input:not(.outlined).smart-input[focus]:not(.underlined),
smart-time-input:not(.outlined).smart-input[focus]:not(.underlined),
smart-date-range-input:not(.outlined).smart-input[focus]:not(.underlined),
smart-drop-down-button:not(.outlined).smart-input[focus]:not(.underlined),
smart-drop-down-list:not(.outlined).smart-input[focus]:not(.underlined),
smart-combo-box:not(.outlined).smart-input[focus]:not(.underlined),
smart-list-box:not(.outlined).smart-input[focus]:not(.underlined),
smart-number-input:not(.outlined).smart-input[focus]:not(.underlined),
smart-numeric-text-box:not(.outlined).smart-input[focus]:not(.underlined),
smart-multi-input:not(.outlined).smart-input[focus]:not(.underlined),
smart-check-input:not(.outlined).smart-input[focus]:not(.underlined),
smart-multi-combo-input:not(.outlined).smart-input[focus]:not(.underlined),
smart-input:not(.outlined).smart-input[focus]:not(.underlined),
smart-text-box:not(.outlined).smart-input[focus]:not(.underlined),
smart-color-input:not(.outlined).smart-input[focus]:not(.underlined),
smart-color-picker:not(.outlined).smart-input[focus]:not(.underlined),
smart-masked-text-box:not(.outlined).smart-input[focus]:not(.underlined),
smart-password-text-box:not(.outlined).smart-input[focus]:not(.underlined),
smart-password-input:not(.outlined).smart-input[focus]:not(.underlined),
smart-text-area:not(.outlined).smart-input[focus]:not(.underlined) {
  box-shadow: 0 0 0 1px var(--smart-primary);
}
smart-tree:not(.outlined).smart-numeric-text-box[focus], smart-tree:not(.outlined).smart-list-box[focus], smart-tree:not(.outlined).smart-text-box[focus],
smart-menu:not(.outlined).smart-numeric-text-box[focus],
smart-menu:not(.outlined).smart-list-box[focus],
smart-menu:not(.outlined).smart-text-box[focus],
smart-date-time-picker:not(.outlined).smart-numeric-text-box[focus],
smart-date-time-picker:not(.outlined).smart-list-box[focus],
smart-date-time-picker:not(.outlined).smart-text-box[focus],
smart-date-input:not(.outlined).smart-numeric-text-box[focus],
smart-date-input:not(.outlined).smart-list-box[focus],
smart-date-input:not(.outlined).smart-text-box[focus],
smart-time-input:not(.outlined).smart-numeric-text-box[focus],
smart-time-input:not(.outlined).smart-list-box[focus],
smart-time-input:not(.outlined).smart-text-box[focus],
smart-date-range-input:not(.outlined).smart-numeric-text-box[focus],
smart-date-range-input:not(.outlined).smart-list-box[focus],
smart-date-range-input:not(.outlined).smart-text-box[focus],
smart-drop-down-button:not(.outlined).smart-numeric-text-box[focus],
smart-drop-down-button:not(.outlined).smart-list-box[focus],
smart-drop-down-button:not(.outlined).smart-text-box[focus],
smart-drop-down-list:not(.outlined).smart-numeric-text-box[focus],
smart-drop-down-list:not(.outlined).smart-list-box[focus],
smart-drop-down-list:not(.outlined).smart-text-box[focus],
smart-combo-box:not(.outlined).smart-numeric-text-box[focus],
smart-combo-box:not(.outlined).smart-list-box[focus],
smart-combo-box:not(.outlined).smart-text-box[focus],
smart-list-box:not(.outlined).smart-numeric-text-box[focus],
smart-list-box:not(.outlined).smart-list-box[focus],
smart-list-box:not(.outlined).smart-text-box[focus],
smart-number-input:not(.outlined).smart-numeric-text-box[focus],
smart-number-input:not(.outlined).smart-list-box[focus],
smart-number-input:not(.outlined).smart-text-box[focus],
smart-numeric-text-box:not(.outlined).smart-numeric-text-box[focus],
smart-numeric-text-box:not(.outlined).smart-list-box[focus],
smart-numeric-text-box:not(.outlined).smart-text-box[focus],
smart-multi-input:not(.outlined).smart-numeric-text-box[focus],
smart-multi-input:not(.outlined).smart-list-box[focus],
smart-multi-input:not(.outlined).smart-text-box[focus],
smart-check-input:not(.outlined).smart-numeric-text-box[focus],
smart-check-input:not(.outlined).smart-list-box[focus],
smart-check-input:not(.outlined).smart-text-box[focus],
smart-multi-combo-input:not(.outlined).smart-numeric-text-box[focus],
smart-multi-combo-input:not(.outlined).smart-list-box[focus],
smart-multi-combo-input:not(.outlined).smart-text-box[focus],
smart-input:not(.outlined).smart-numeric-text-box[focus],
smart-input:not(.outlined).smart-list-box[focus],
smart-input:not(.outlined).smart-text-box[focus],
smart-text-box:not(.outlined).smart-numeric-text-box[focus],
smart-text-box:not(.outlined).smart-list-box[focus],
smart-text-box:not(.outlined).smart-text-box[focus],
smart-color-input:not(.outlined).smart-numeric-text-box[focus],
smart-color-input:not(.outlined).smart-list-box[focus],
smart-color-input:not(.outlined).smart-text-box[focus],
smart-color-picker:not(.outlined).smart-numeric-text-box[focus],
smart-color-picker:not(.outlined).smart-list-box[focus],
smart-color-picker:not(.outlined).smart-text-box[focus],
smart-masked-text-box:not(.outlined).smart-numeric-text-box[focus],
smart-masked-text-box:not(.outlined).smart-list-box[focus],
smart-masked-text-box:not(.outlined).smart-text-box[focus],
smart-password-text-box:not(.outlined).smart-numeric-text-box[focus],
smart-password-text-box:not(.outlined).smart-list-box[focus],
smart-password-text-box:not(.outlined).smart-text-box[focus],
smart-password-input:not(.outlined).smart-numeric-text-box[focus],
smart-password-input:not(.outlined).smart-list-box[focus],
smart-password-input:not(.outlined).smart-text-box[focus],
smart-text-area:not(.outlined).smart-numeric-text-box[focus],
smart-text-area:not(.outlined).smart-list-box[focus],
smart-text-area:not(.outlined).smart-text-box[focus] {
  border-radius: var(--smart-border-radius);
  box-shadow: 0 0 0 1px var(--smart-primary);
}
smart-tree:not(.outlined) .smart-drop-down smart-list-box[focus],
smart-menu:not(.outlined) .smart-drop-down smart-list-box[focus],
smart-date-time-picker:not(.outlined) .smart-drop-down smart-list-box[focus],
smart-date-input:not(.outlined) .smart-drop-down smart-list-box[focus],
smart-time-input:not(.outlined) .smart-drop-down smart-list-box[focus],
smart-date-range-input:not(.outlined) .smart-drop-down smart-list-box[focus],
smart-drop-down-button:not(.outlined) .smart-drop-down smart-list-box[focus],
smart-drop-down-list:not(.outlined) .smart-drop-down smart-list-box[focus],
smart-combo-box:not(.outlined) .smart-drop-down smart-list-box[focus],
smart-list-box:not(.outlined) .smart-drop-down smart-list-box[focus],
smart-number-input:not(.outlined) .smart-drop-down smart-list-box[focus],
smart-numeric-text-box:not(.outlined) .smart-drop-down smart-list-box[focus],
smart-multi-input:not(.outlined) .smart-drop-down smart-list-box[focus],
smart-check-input:not(.outlined) .smart-drop-down smart-list-box[focus],
smart-multi-combo-input:not(.outlined) .smart-drop-down smart-list-box[focus],
smart-input:not(.outlined) .smart-drop-down smart-list-box[focus],
smart-text-box:not(.outlined) .smart-drop-down smart-list-box[focus],
smart-color-input:not(.outlined) .smart-drop-down smart-list-box[focus],
smart-color-picker:not(.outlined) .smart-drop-down smart-list-box[focus],
smart-masked-text-box:not(.outlined) .smart-drop-down smart-list-box[focus],
smart-password-text-box:not(.outlined) .smart-drop-down smart-list-box[focus],
smart-password-input:not(.outlined) .smart-drop-down smart-list-box[focus],
smart-text-area:not(.outlined) .smart-drop-down smart-list-box[focus] {
  box-shadow: none;
}
smart-tree:not(.outlined)[focus], smart-tree:not(.outlined)[opened], smart-tree:not(.outlined)[active],
smart-menu:not(.outlined)[focus],
smart-menu:not(.outlined)[opened],
smart-menu:not(.outlined)[active],
smart-date-time-picker:not(.outlined)[focus],
smart-date-time-picker:not(.outlined)[opened],
smart-date-time-picker:not(.outlined)[active],
smart-date-input:not(.outlined)[focus],
smart-date-input:not(.outlined)[opened],
smart-date-input:not(.outlined)[active],
smart-time-input:not(.outlined)[focus],
smart-time-input:not(.outlined)[opened],
smart-time-input:not(.outlined)[active],
smart-date-range-input:not(.outlined)[focus],
smart-date-range-input:not(.outlined)[opened],
smart-date-range-input:not(.outlined)[active],
smart-drop-down-button:not(.outlined)[focus],
smart-drop-down-button:not(.outlined)[opened],
smart-drop-down-button:not(.outlined)[active],
smart-drop-down-list:not(.outlined)[focus],
smart-drop-down-list:not(.outlined)[opened],
smart-drop-down-list:not(.outlined)[active],
smart-combo-box:not(.outlined)[focus],
smart-combo-box:not(.outlined)[opened],
smart-combo-box:not(.outlined)[active],
smart-list-box:not(.outlined)[focus],
smart-list-box:not(.outlined)[opened],
smart-list-box:not(.outlined)[active],
smart-number-input:not(.outlined)[focus],
smart-number-input:not(.outlined)[opened],
smart-number-input:not(.outlined)[active],
smart-numeric-text-box:not(.outlined)[focus],
smart-numeric-text-box:not(.outlined)[opened],
smart-numeric-text-box:not(.outlined)[active],
smart-multi-input:not(.outlined)[focus],
smart-multi-input:not(.outlined)[opened],
smart-multi-input:not(.outlined)[active],
smart-check-input:not(.outlined)[focus],
smart-check-input:not(.outlined)[opened],
smart-check-input:not(.outlined)[active],
smart-multi-combo-input:not(.outlined)[focus],
smart-multi-combo-input:not(.outlined)[opened],
smart-multi-combo-input:not(.outlined)[active],
smart-input:not(.outlined)[focus],
smart-input:not(.outlined)[opened],
smart-input:not(.outlined)[active],
smart-text-box:not(.outlined)[focus],
smart-text-box:not(.outlined)[opened],
smart-text-box:not(.outlined)[active],
smart-color-input:not(.outlined)[focus],
smart-color-input:not(.outlined)[opened],
smart-color-input:not(.outlined)[active],
smart-color-picker:not(.outlined)[focus],
smart-color-picker:not(.outlined)[opened],
smart-color-picker:not(.outlined)[active],
smart-masked-text-box:not(.outlined)[focus],
smart-masked-text-box:not(.outlined)[opened],
smart-masked-text-box:not(.outlined)[active],
smart-password-text-box:not(.outlined)[focus],
smart-password-text-box:not(.outlined)[opened],
smart-password-text-box:not(.outlined)[active],
smart-password-input:not(.outlined)[focus],
smart-password-input:not(.outlined)[opened],
smart-password-input:not(.outlined)[active],
smart-text-area:not(.outlined)[focus],
smart-text-area:not(.outlined)[opened],
smart-text-area:not(.outlined)[active] {
  --smart-outline: var(--smart-primary);
  --smart-ui-state-active: var(--smart-secondary-background) !important;
  --smart-ui-state-color-active: var(--smart-background-color) !important;
  --smart-ui-state-border-active: var(--smart-primary) !important;
  border-color: var(--smart-primary) !important;
}
smart-tree:not(.outlined)[focus].smart-date-time-picker, smart-tree:not(.outlined)[opened].smart-date-time-picker, smart-tree:not(.outlined)[active].smart-date-time-picker,
smart-menu:not(.outlined)[focus].smart-date-time-picker,
smart-menu:not(.outlined)[opened].smart-date-time-picker,
smart-menu:not(.outlined)[active].smart-date-time-picker,
smart-date-time-picker:not(.outlined)[focus].smart-date-time-picker,
smart-date-time-picker:not(.outlined)[opened].smart-date-time-picker,
smart-date-time-picker:not(.outlined)[active].smart-date-time-picker,
smart-date-input:not(.outlined)[focus].smart-date-time-picker,
smart-date-input:not(.outlined)[opened].smart-date-time-picker,
smart-date-input:not(.outlined)[active].smart-date-time-picker,
smart-time-input:not(.outlined)[focus].smart-date-time-picker,
smart-time-input:not(.outlined)[opened].smart-date-time-picker,
smart-time-input:not(.outlined)[active].smart-date-time-picker,
smart-date-range-input:not(.outlined)[focus].smart-date-time-picker,
smart-date-range-input:not(.outlined)[opened].smart-date-time-picker,
smart-date-range-input:not(.outlined)[active].smart-date-time-picker,
smart-drop-down-button:not(.outlined)[focus].smart-date-time-picker,
smart-drop-down-button:not(.outlined)[opened].smart-date-time-picker,
smart-drop-down-button:not(.outlined)[active].smart-date-time-picker,
smart-drop-down-list:not(.outlined)[focus].smart-date-time-picker,
smart-drop-down-list:not(.outlined)[opened].smart-date-time-picker,
smart-drop-down-list:not(.outlined)[active].smart-date-time-picker,
smart-combo-box:not(.outlined)[focus].smart-date-time-picker,
smart-combo-box:not(.outlined)[opened].smart-date-time-picker,
smart-combo-box:not(.outlined)[active].smart-date-time-picker,
smart-list-box:not(.outlined)[focus].smart-date-time-picker,
smart-list-box:not(.outlined)[opened].smart-date-time-picker,
smart-list-box:not(.outlined)[active].smart-date-time-picker,
smart-number-input:not(.outlined)[focus].smart-date-time-picker,
smart-number-input:not(.outlined)[opened].smart-date-time-picker,
smart-number-input:not(.outlined)[active].smart-date-time-picker,
smart-numeric-text-box:not(.outlined)[focus].smart-date-time-picker,
smart-numeric-text-box:not(.outlined)[opened].smart-date-time-picker,
smart-numeric-text-box:not(.outlined)[active].smart-date-time-picker,
smart-multi-input:not(.outlined)[focus].smart-date-time-picker,
smart-multi-input:not(.outlined)[opened].smart-date-time-picker,
smart-multi-input:not(.outlined)[active].smart-date-time-picker,
smart-check-input:not(.outlined)[focus].smart-date-time-picker,
smart-check-input:not(.outlined)[opened].smart-date-time-picker,
smart-check-input:not(.outlined)[active].smart-date-time-picker,
smart-multi-combo-input:not(.outlined)[focus].smart-date-time-picker,
smart-multi-combo-input:not(.outlined)[opened].smart-date-time-picker,
smart-multi-combo-input:not(.outlined)[active].smart-date-time-picker,
smart-input:not(.outlined)[focus].smart-date-time-picker,
smart-input:not(.outlined)[opened].smart-date-time-picker,
smart-input:not(.outlined)[active].smart-date-time-picker,
smart-text-box:not(.outlined)[focus].smart-date-time-picker,
smart-text-box:not(.outlined)[opened].smart-date-time-picker,
smart-text-box:not(.outlined)[active].smart-date-time-picker,
smart-color-input:not(.outlined)[focus].smart-date-time-picker,
smart-color-input:not(.outlined)[opened].smart-date-time-picker,
smart-color-input:not(.outlined)[active].smart-date-time-picker,
smart-color-picker:not(.outlined)[focus].smart-date-time-picker,
smart-color-picker:not(.outlined)[opened].smart-date-time-picker,
smart-color-picker:not(.outlined)[active].smart-date-time-picker,
smart-masked-text-box:not(.outlined)[focus].smart-date-time-picker,
smart-masked-text-box:not(.outlined)[opened].smart-date-time-picker,
smart-masked-text-box:not(.outlined)[active].smart-date-time-picker,
smart-password-text-box:not(.outlined)[focus].smart-date-time-picker,
smart-password-text-box:not(.outlined)[opened].smart-date-time-picker,
smart-password-text-box:not(.outlined)[active].smart-date-time-picker,
smart-password-input:not(.outlined)[focus].smart-date-time-picker,
smart-password-input:not(.outlined)[opened].smart-date-time-picker,
smart-password-input:not(.outlined)[active].smart-date-time-picker,
smart-text-area:not(.outlined)[focus].smart-date-time-picker,
smart-text-area:not(.outlined)[opened].smart-date-time-picker,
smart-text-area:not(.outlined)[active].smart-date-time-picker {
  border-width: 2px;
}
smart-tree:not(.outlined)[focus].smart-date-time-picker .smart-drop-down-button, smart-tree:not(.outlined)[opened].smart-date-time-picker .smart-drop-down-button, smart-tree:not(.outlined)[active].smart-date-time-picker .smart-drop-down-button,
smart-menu:not(.outlined)[focus].smart-date-time-picker .smart-drop-down-button,
smart-menu:not(.outlined)[opened].smart-date-time-picker .smart-drop-down-button,
smart-menu:not(.outlined)[active].smart-date-time-picker .smart-drop-down-button,
smart-date-time-picker:not(.outlined)[focus].smart-date-time-picker .smart-drop-down-button,
smart-date-time-picker:not(.outlined)[opened].smart-date-time-picker .smart-drop-down-button,
smart-date-time-picker:not(.outlined)[active].smart-date-time-picker .smart-drop-down-button,
smart-date-input:not(.outlined)[focus].smart-date-time-picker .smart-drop-down-button,
smart-date-input:not(.outlined)[opened].smart-date-time-picker .smart-drop-down-button,
smart-date-input:not(.outlined)[active].smart-date-time-picker .smart-drop-down-button,
smart-time-input:not(.outlined)[focus].smart-date-time-picker .smart-drop-down-button,
smart-time-input:not(.outlined)[opened].smart-date-time-picker .smart-drop-down-button,
smart-time-input:not(.outlined)[active].smart-date-time-picker .smart-drop-down-button,
smart-date-range-input:not(.outlined)[focus].smart-date-time-picker .smart-drop-down-button,
smart-date-range-input:not(.outlined)[opened].smart-date-time-picker .smart-drop-down-button,
smart-date-range-input:not(.outlined)[active].smart-date-time-picker .smart-drop-down-button,
smart-drop-down-button:not(.outlined)[focus].smart-date-time-picker .smart-drop-down-button,
smart-drop-down-button:not(.outlined)[opened].smart-date-time-picker .smart-drop-down-button,
smart-drop-down-button:not(.outlined)[active].smart-date-time-picker .smart-drop-down-button,
smart-drop-down-list:not(.outlined)[focus].smart-date-time-picker .smart-drop-down-button,
smart-drop-down-list:not(.outlined)[opened].smart-date-time-picker .smart-drop-down-button,
smart-drop-down-list:not(.outlined)[active].smart-date-time-picker .smart-drop-down-button,
smart-combo-box:not(.outlined)[focus].smart-date-time-picker .smart-drop-down-button,
smart-combo-box:not(.outlined)[opened].smart-date-time-picker .smart-drop-down-button,
smart-combo-box:not(.outlined)[active].smart-date-time-picker .smart-drop-down-button,
smart-list-box:not(.outlined)[focus].smart-date-time-picker .smart-drop-down-button,
smart-list-box:not(.outlined)[opened].smart-date-time-picker .smart-drop-down-button,
smart-list-box:not(.outlined)[active].smart-date-time-picker .smart-drop-down-button,
smart-number-input:not(.outlined)[focus].smart-date-time-picker .smart-drop-down-button,
smart-number-input:not(.outlined)[opened].smart-date-time-picker .smart-drop-down-button,
smart-number-input:not(.outlined)[active].smart-date-time-picker .smart-drop-down-button,
smart-numeric-text-box:not(.outlined)[focus].smart-date-time-picker .smart-drop-down-button,
smart-numeric-text-box:not(.outlined)[opened].smart-date-time-picker .smart-drop-down-button,
smart-numeric-text-box:not(.outlined)[active].smart-date-time-picker .smart-drop-down-button,
smart-multi-input:not(.outlined)[focus].smart-date-time-picker .smart-drop-down-button,
smart-multi-input:not(.outlined)[opened].smart-date-time-picker .smart-drop-down-button,
smart-multi-input:not(.outlined)[active].smart-date-time-picker .smart-drop-down-button,
smart-check-input:not(.outlined)[focus].smart-date-time-picker .smart-drop-down-button,
smart-check-input:not(.outlined)[opened].smart-date-time-picker .smart-drop-down-button,
smart-check-input:not(.outlined)[active].smart-date-time-picker .smart-drop-down-button,
smart-multi-combo-input:not(.outlined)[focus].smart-date-time-picker .smart-drop-down-button,
smart-multi-combo-input:not(.outlined)[opened].smart-date-time-picker .smart-drop-down-button,
smart-multi-combo-input:not(.outlined)[active].smart-date-time-picker .smart-drop-down-button,
smart-input:not(.outlined)[focus].smart-date-time-picker .smart-drop-down-button,
smart-input:not(.outlined)[opened].smart-date-time-picker .smart-drop-down-button,
smart-input:not(.outlined)[active].smart-date-time-picker .smart-drop-down-button,
smart-text-box:not(.outlined)[focus].smart-date-time-picker .smart-drop-down-button,
smart-text-box:not(.outlined)[opened].smart-date-time-picker .smart-drop-down-button,
smart-text-box:not(.outlined)[active].smart-date-time-picker .smart-drop-down-button,
smart-color-input:not(.outlined)[focus].smart-date-time-picker .smart-drop-down-button,
smart-color-input:not(.outlined)[opened].smart-date-time-picker .smart-drop-down-button,
smart-color-input:not(.outlined)[active].smart-date-time-picker .smart-drop-down-button,
smart-color-picker:not(.outlined)[focus].smart-date-time-picker .smart-drop-down-button,
smart-color-picker:not(.outlined)[opened].smart-date-time-picker .smart-drop-down-button,
smart-color-picker:not(.outlined)[active].smart-date-time-picker .smart-drop-down-button,
smart-masked-text-box:not(.outlined)[focus].smart-date-time-picker .smart-drop-down-button,
smart-masked-text-box:not(.outlined)[opened].smart-date-time-picker .smart-drop-down-button,
smart-masked-text-box:not(.outlined)[active].smart-date-time-picker .smart-drop-down-button,
smart-password-text-box:not(.outlined)[focus].smart-date-time-picker .smart-drop-down-button,
smart-password-text-box:not(.outlined)[opened].smart-date-time-picker .smart-drop-down-button,
smart-password-text-box:not(.outlined)[active].smart-date-time-picker .smart-drop-down-button,
smart-password-input:not(.outlined)[focus].smart-date-time-picker .smart-drop-