xel/themes/base.css

Widget toolkit for building native-like Web, Electron and Hybrid apps

/*****************************************************************************************************************/

/**
 * HTML elements
 */

:root {
  width: 100%;
  height: 100%;
  margin: 0;
  interpolate-size: allow-keywords;
  font-family: sans-serif;
  line-height: 1.6;
}

body {
  width: 100vw;
  height: 100%;
  margin: 0;
  overflow-y: overlay;
}

/* Headings */

h1 {
  margin: 22px 0 16px;
  box-sizing: border-box;
  line-height: 1;
  font-size: 3.25rem;
  font-weight: 700;
}

h2 {
  margin: 18px 0 14px 0;
  box-sizing: border-box;
  line-height: 1;
  font-size: 2.125rem;
  font-weight: 700;
}

h3 {
  margin: 16px 0 12px 0;
  box-sizing: border-box;
  line-height: 1.2;
  font-size: 1.75rem;
  font-weight: 700;
}

h4 {
  margin: 14px 0 10px 0;
  box-sizing: border-box;
  line-height: 1.1;
  font-size: 1.5rem;
  font-weight: 700;
}

h5 {
  margin: 12px 0 8px 0;
  box-sizing: border-box;
  line-height: 1.1;
  font-size: 1.25rem;
  font-weight: 700;
}

h6 {
  margin: 8px 0 5px 0;
  box-sizing: border-box;
  line-height: 1.1;
  font-size: 1rem;
  font-weight: 700;
}

h1 em,
h2 em,
h3 em,
h4 em,
h5 em,
h6 em {
  font-weight: inherit;
}
h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong {
  font-weight: 900;
}

/* Paragraphs */

p {
  margin: 16px 0;
}

p:last-child {
  margin-bottom: 0;
}

/* Links */

a {
  font-weight: 500;
}

/* Tables */

table {
  width: 100%;
  margin: 16px 0;
  border-collapse: collapse;
  /* Needed to make "border-radius" property work */
  border-style: hidden;
  box-shadow: 0 0 0 1px var(--border-color);
}

th {
  text-align: start;
  padding: 8px 14px;
  border-spacing: 0;
}

td {
  padding: 8px 14px;
  border-spacing: 0;
}

/* Markers */

em {
  font-weight: 500;
}

/* Code */

pre, code, var {
  font-size: 0.875rem;
  font-style: normal;
  padding: 0 4px;
}
pre {
  margin: 14px 0;
  padding: 4px 6px;
  white-space: pre-wrap;
  box-sizing: border-box;
}
pre > code {
  display: block;
  padding: 0;
  box-sizing: border-box;
  background-color: transparent;
  outline-width: 0px;
  line-height: 1.3;
}

/* Separators */

hr {
  width: 100%;
  height: 1px;
  min-height: 1px;
  margin: 24px 0;
  box-sizing: border-box;
  border: none;
}

/* Blockquotes */

blockquote {
  box-sizing: border-box;
  margin: 16px 0;
  padding: 5px 14px;
  border-left-width: 8px;
  border-left-style: solid;
}
blockquote > blockquote {
  margin: 6px 0;
}

blockquote > p:first-child {
  margin-top: 0;
}

/* Lists */

ul,
ol {
  margin: 12px 0;
  padding: 0;
}
p + ul {
  margin: -10px 0 0 0;
}
li > ul,
li > ol {
  margin: 0;
}

li {
  position: relative;
  margin: 0;
  padding: 0;
}
ul li {
  margin-left: 20px;
}
ol li {
  margin-left: 16px;
}

li > p {
  margin: 4px 0;
}

ol > li::marker {
  font-weight: 700;
}

/* Images */

img {
  display: block;
  height: auto;
  margin: 14px auto;
  max-width: 100%;
  user-select: none;
  box-sizing: border-box;
  background: var(--checkboard-background);
  border-width: 1px;
  border-style: solid;
  border-color: var(--border-color);
  -webkit-user-select: none;
  -webkit-user-modify: read-only;
}
img:active {
  cursor: -webkit-grabbing;
}

[popover] {
  color: var(--text-color);
  background-color: var(--foreground-color);
}

/*****************************************************************************************************************/

/**
 * Scrollbar
 */

/* Chromium, WebKit */
::-webkit-scrollbar {
  max-width: 6px;
  max-height: 6px;
}
::-webkit-scrollbar-corner {
  display: none
}

/* Gecko */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
  }
}

/*****************************************************************************************************************/

/**
 * Card
 */

x-card:not(:defined) {
  display: none;
}

/* Footer */
x-card > footer {
  padding: 8px 16px;
  width: calc(100% + 40px);
  height: calc(100% + 20px);
  margin-left: -20px;
  margin-bottom: -16px;
  box-sizing: border-box;
  background: lightgrey;
}
x-card > footer:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
x-card > footer:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* Heading */
x-card > h1:first-child {
  margin-top: 0;
}
x-card > h2:first-child {
  margin-top: 0;
}
x-card > h3:first-child {
  margin-top: 0;
}
x-card > h4:first-child {
  margin-top: 0;
}
x-card > h5:first-child {
  margin-top: 0;
}
x-card > h6:first-child {
  margin-top: 0;
}

/*****************************************************************************************************************/

/**
 * Avatar
 */

x-avatar[size="small"] {
  width: 28px;
  height: 28px;
}
x-avatar[size="large"] {
  width: 54px;
  height: 54px;
}

/* Image */
x-avatar > img {
  width: 100%;
  height: 100%;
  -webkit-user-drag: none;
}

/* Placeholder icon */
x-avatar > x-icon {
  width: 55%;
  height: 55%;
}

/* Placeholder text */
x-avatar > x-label {
  font-size: 1rem;
  pointer-events: none;
}
x-avatar[size="small"] > x-label {
  font-size: 0.75rem;
}
x-avatar[size="large"] > x-label {
  font-size: 1.5rem;
}

/*****************************************************************************************************************/

/**
 * Accordion
 */

x-accordion:not(:defined) {
  display: none;
}

/* Arrow */
x-accordion[size="small"]::part(arrow) {
  width: 14px;
  height: 14px;
}
x-accordion[size="large"]::part(arrow) {
  width: 18px;
  height: 18px;
}

/* Header */
x-accordion > header {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: 7px 0 7px 20px;
}
x-accordion[size="small"] > header {
  padding-left: 18px;
}
x-accordion[size="large"] > header {
  padding-left: 22px;
}

/* Header label */
x-accordion > header > x-label:first-child {
  flex: 1;
}
x-accordion > header > *:not(:last-child) {
  margin-right: 20px;
}

/* Content */
x-accordion:not([expanded]):not([animating]) > *:not(header) {
  display: none !important;
}

/*****************************************************************************************************************/

/**
 * Icon
 */

x-icon[size="small"] {
  width: 15px;
  height: 15px;
}
x-icon[size="large"] {
  width: 21px;
  height: 21px;
}
x-icon:not(:defined) {
  display: none;
}

/*****************************************************************************************************************/

/**
 * Label
 */

x-label:not(:defined) {
  display: none;
}

/*****************************************************************************************************************/

/**
 * Shortcut
 */

x-shortcut:not(:defined) {
  display: none;
}

/*****************************************************************************************************************/

/**
 * Stepper
 */

x-stepper:not(:defined) {
  display: none;
}

/*****************************************************************************************************************/

/**
 * Swatch
 */

x-swatch[size="small"] {
  width: 16px;
  height: 16px;
}
x-swatch[size="large"] {
  width: 20px;
  height: 20px;
}
x-swatch:not(:defined) {
  display: none;
}

/*****************************************************************************************************************/

/**
 * Button
 */

x-button {
  --min-pressed-time: 150ms;
}
@media (pointer:coarse) {
  x-button {
    --min-pressed-time: 600ms;
  }
}
a:has(x-button) {
  text-decoration: none;
}
x-button[toggled] {
  z-index: 1;
}
x-button[condensed] {
  padding: 2px 7px;
}
x-button[size="small"] {
  min-height: 24px;
}
x-button[size="large"] {
  min-height: 38px;
}
x-buttons[vertical] > x-button {
  width: 100%;
  justify-content: flex-start;
}
x-button:not(:defined) {
  display: none;
}

/* Label */
x-button > x-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
  min-width: 1px;
  pointer-events: none;
}
x-button > x-label ~ x-icon,
x-button > x-icon ~ x-label {
  margin: 0 0 0 6px;
}

/* Menu */
x-button > x-menu {
  font-size: 0.875rem;
}

/*****************************************************************************************************************/

/**
 * Button ("normal" skin)
 */

x-button[skin="normal"][size="small"] > x-icon {
  width: 14px;
  height: 14px;
}
x-button[skin="normal"][size="large"] > x-icon {
  width: 20px;
  height: 20px;
}

/*****************************************************************************************************************/

/**
 * Button ("flat" skin)
 */

x-button[skin="flat"] {
  padding: 0;
}
x-buttons:not([vertical]) > x-button[skin="flat"]:not(:first-of-type) {
  margin-left: 10px;
}
x-buttons:not([vertical]) > x-button[skin="flat"][size="small"]:not(:first-of-type) {
  margin-left: 5px;
}
x-buttons[vertical] > x-button[skin="flat"]:not(:first-of-type) {
  margin-top: 10px;
}
x-buttons[vertical] > x-button[skin="flat"][size="small"]:not(:first-of-type) {
  margin-top: 5px;
}

/* Icon */
x-button[skin="flat"] > x-icon {
  width: 26px;
  height: 26px;
}
x-button[skin="flat"][size="small"] > x-icon {
  width: 22px;
  height: 22px;
}
x-button[skin="flat"][size="large"] > x-icon {
  width: 28px;
  height: 28px;
}

/*****************************************************************************************************************/

/**
 * Button ("recessed" skin)
 */

x-button[skin="recessed"] {
  min-height: 18px;
  padding: 4px 8px;
}
x-button[skin="recessed"][size="small"] {
  padding: 3px 8px;
}
x-button[skin="recessed"][size="large"] {
  padding: 5px 8px;
}

/* Horizontal siblings */
x-buttons:not([vertical]) > x-button[skin="recessed"] + x-button[skin="recessed"] {
  margin-left: 4px;
}

/* Vertical siblings */
x-buttons[vertical] > x-button[skin="recessed"] + x-button[skin="recessed"] {
  margin-top: 4px;
}

/* Icon */
x-button[skin="recessed"] > x-icon {
  width: 16px;
  height: 16px;
}
x-button[skin="recessed"][size="small"] > x-icon {
  width: 12px;
  height: 12px;
}
x-button[skin="recessed"][size="large"] > x-icon {
  width: 20px;
  height: 20px;
}

/*****************************************************************************************************************/

/**
 * Button ("dock" skin)
 */

x-button[skin="dock"],
x-buttons[vertical] > x-button[skin="dock"] {
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  justify-content: center;
}
x-button[skin="dock"][size="small"],
x-buttons[vertical] > x-button[skin="dock"][size="small"] {
  width: 30px;
  height: 30px;
  min-height: 30px;
}
x-button[skin="dock"][size="large"],
x-buttons[vertical] > x-button[skin="dock"][size="large"] {
  width: 45px;
  height: 45px;
  min-height: 45px;
}

/* Horizontal siblings */
x-buttons:not([vertical]) > x-button[skin="dock"] + x-button[skin="dock"] {
  margin-left: -1px;
}

/* Vertical siblings */
x-buttons[vertical] > x-button[skin="dock"] + x-button[skin="dock"] {
  margin-top: -1px;
}

/* Icon */
x-button[skin="dock"] > x-icon {
  width: 17px;
  height: 17px;
}
x-button[skin="dock"][size="small"] > x-icon {
  width: 14px;
  height: 14px;
}
x-button[skin="dock"][size="large"] > x-icon {
  width: 20px;
  height: 20px;
}

/*****************************************************************************************************************/

/**
 * Buttons
 */

x-buttons[vertical] {
  flex-flow: column;
  align-items: flex-start;
  justify-content: center;
}
x-buttons:not(:defined) {
  display: none;
}

/*****************************************************************************************************************/

/**
 * Tag
 */

x-tag[size="small"] {
  height: 18px;
}
x-tag[size="large"] {
  height: 30px;
}
x-tag:not(:defined) {
  display: none;
}

/* Swatch */
x-tag > x-swatch {
  width: 14px;
  height: 14px;
}
x-tag[size="small"] > x-swatch {
  width: 12px;
  height: 12px;
}
x-tag[size="large"] > x-swatch {
  width: 16px;
  height: 16px;
}

/* Label */
x-tag > x-label {
  font-size: 0.75rem;
}
x-tag :not(x-label) + x-label {
  margin-left: 0.25rem;
}
x-tag[size="small"] > x-label {
  font-size: 0.6875rem;
}

/* Icon */
x-tag > x-icon {
  width: 15px;
  height: 15px;
}

/*****************************************************************************************************************/

/**
 * Tags
 */

x-tags {
  margin-top: -2px;
  margin-left: -2px;
}
x-tags:not(:defined) {
  display: none;
}

/* Tag */
x-tags x-tag {
  margin: 2px;
}

/*****************************************************************************************************************/

/**
 * Tags input
 */

x-tagsinput[size="small"] {
  padding: 0px;
  gap: 0px;
}
x-tagsinput[size="small"] > x-tag {
  height: 22px;
  transform: scale(0.92);
}
x-tagsinput[size="large"] {
  padding: 6px;
  gap: 6px;
}
x-tagsinput:focus-within {
  z-index: 10;
}
x-tagsinput:not(:defined) {
  display: none;
}

/* Placeholder */
x-tagsinput > x-label {
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Error message */
x-tagsinput[size="small"][error]::before {
  top: 27px;
}
x-tagsinput[size="large"][error]::before {
  top: 41px;
}

/*****************************************************************************************************************/

/**
 * Tab
 */

x-tab[size="small"] {
  min-height: 24px;
}
x-tab[size="large"] {
  min-height: 38px;
}
x-tab:not(:defined) {
  display: none;
}

/* Icon */
x-tab x-icon {
  width: 17px;
  height: 17px;
  min-width: 17px;
  color: inherit;
}
x-tab[size="small"] x-icon {
  width: 15px;
  height: 15px;
  min-width: 15px
}
x-tab[size="large"] x-icon {
  width: 19px;
  height: 19px;
  min-width: 19px
}

/* Label */
x-tab x-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.2;
  cursor: inherit;
  flex: 1;
}
x-tab x-icon + x-label {
  margin-left: 6px;
}
x-tab x-box:is([vertical]) x-icon + x-label {
  margin-left: 0px;
}

/*****************************************************************************************************************/

/**
 * Tabs
 */

x-tabs:not(:defined) {
  display: none;
}

/*****************************************************************************************************************/

/**
 * Menu
 */

x-menu:not(:defined) {
  display: none;
}
x-menu:has(x-menu[opened]) {
  /* @bugfix: Menu fails to render if its ancestor is scrollable (https://bugs.webkit.org/show_bug.cgi?id=160953) */
  overflow: -webkit-paged-x;
}

/* Image */

x-menu img {
  margin: 0;
  background: none;
  border: none;
}

/* Separator */
x-menu hr {
  width: 100%;
  height: 1px;
  margin: 4px 0px;
  box-sizing: border-box;
}
x-menu hr + hr,
x-menu hr:last-child {
  display: none;
}

/*****************************************************************************************************************/

/**
 * Menu item
 */

x-menuitem[size="small"] {
  min-height: 24px;
}
x-menuitem[size="large"] {
  min-height: 38px;
}
x-menuitem:not(:defined) {
  display: none;
}
x-menuitem[highlighted] {
  color: white;
  background: var(--accent-color);
}

/* Image */
x-menuitem img {
  width: 16px;
  height: 16px;
}

/* Icon */
x-menuitem x-icon {
  width: 16px;
  height: 16px;
}

/* Label */
x-menuitem x-label {
  display: block;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: inherit;
  line-height: 1.4;
}
x-menuitem img + x-label,
x-menuitem x-swatch + x-label,
x-menuitem x-icon + x-label {
  margin-left: 8px;
}

/* Shortcut */
x-menuitem x-shortcut {
  margin-left: auto;
}
x-menuitem x-label + x-shortcut {
  margin-left: 8px;
}

/*****************************************************************************************************************/

/**
 * Menubar
 */

x-menubar[size="small"] {
  height: 30px;
}
x-menubar[size="large"] {
  height: 42px;
}
x-menubar:not(:defined) {
  display: none;
}

/* Menu item */
x-menubar > x-menuitem {
  height: 100%;
  padding: 0 11px;
  min-height: 0;
}
x-menubar > x-menuitem[autohidden] {
  display: none;
}

/*****************************************************************************************************************/

/**
 * Nav
 */

x-navitem + x-navitem,
a:has(x-navitem) + a:has(x-navitem),
a:has(x-navitem) + x-navitem,
x-navitem + a:has(x-navitem) {
  margin: 3px 0;
}
x-nav x-nav > *:first-child {
  margin-top: 3px;
}
x-nav x-nav > *:last-child {
  margin-bottom: 0;
}
x-nav x-nav > * {
  margin-left: 34px !important;
}
x-nav x-nav > * {
  max-width: calc(100% - 34px) !important;
}

/* Link */
x-nav > a {
  display: block;
  text-decoration: none;
}

/* Label */
x-nav x-label {
  max-width: 100%;
  flex: 1 1 0%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
  font-size: 0.9375rem;
  text-align: start;
}
x-nav x-icon + x-label {
  margin-left: 14px;
}
x-nav[collapsed] x-navitem > x-label {
  display: none;
}

/* Primary icon */
x-nav x-icon {
  width: 20px;
  height: 20px;
}

/* Secondary icon */
x-nav x-label + x-icon {
  width: 18px;
  height: 18px;
  margin: 0 0 0 10px;
}
x-nav[collapsed] x-navitem > x-label + x-icon {
  display: none;
}

/* Button */
x-nav[collapsed] x-navitem::part(button) {
  padding: 0;
}

/* Arrow */
x-nav[collapsed] x-navitem::part(arrow) {
  display: none;
}

/*****************************************************************************************************************/

/**
 * Context menu
 */

x-contextmenu:not(:defined) {
  display: none;
}

/*****************************************************************************************************************/

/**
 * Dialog
 */

dialog {
  overflow: hidden;
  position: fixed;
  min-width: 200px;
  min-height: 100px;
  max-height: none;
  margin: auto;
  padding: 20px 24px;
  box-sizing: border-box;
  font-size: 0.8125rem;
  line-height: 1.6;
}
dialog:focus {
  outline: none;
}
dialog:not(:defined) {
  display: none;
}

/* Footer */
dialog > footer {
  display: flex;
  flex-flow: row;
  justify-content: flex-end;
  padding: 12px 24px;
  width: calc(100% + 48px);
  height: calc(100% + 22px);
  margin-top: 10px;
  margin-left: -24px;
  margin-bottom: -20px;
  box-sizing: border-box;
  background: lightgrey;
}
dialog > footer:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
dialog > footer:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* Footer button */
dialog > footer x-button + x-button {
  margin-left: 8px;
}

/* Heading */
dialog h3 {
  font-size: 1.125rem;
  font-weight: 700;
}

dialog > *:first-child {
  margin-top: 0;
}

/*****************************************************************************************************************/

/**
 * Popover
 */

x-popover {
  padding: 12px;
  overflow: auto;
}
x-popover:has(footer) {
  overflow: hidden;
}
x-popover:not(:defined) {
  display: none;
}

/* Footer */
x-popover > footer {
  padding: 12px;
  width: calc(100% + 24px);
  height: calc(100% + 12px);
  margin-left: -12px;
  margin-bottom: -12px;
  margin-top: 12px;
  box-sizing: border-box;
  background: lightgrey;
}
x-popover > footer:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
x-popover > footer:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

/*****************************************************************************************************************/

/**
 * Notification
 */

x-notification[size="small"] {
  padding: 3px 12px;
}
x-notification[size="large"] {
  padding: 8px 12px;
}
x-notification:not(:defined) {
  display: none;
}

/* Paragraph */
x-notification > p {
  margin: 0;
}

/*****************************************************************************************************************/

/**
 * Checkbox
 */

x-checkbox:not(:defined) {
  display: none;
}
x-checkbox + x-checkbox {
  margin-top: 6px;
}

/* Indicator */
x-checkbox[size="small"]::part(indicator) {
  width: 17px;
  height: 17px
}
x-checkbox[size="large"]::part(indicator) {
  width: 21px;
  height: 21px;
}

/* Label */
x-checkbox > x-label {
  display: block;
  margin-left: 8px;
  padding: 1px 0;
}

/*****************************************************************************************************************/

/**
 * Radio
 */

x-radio + x-radio {
  margin-top: 6px;
}
x-radio:not(:defined) {
  display: none;
}

/* Indicator */
x-radio[size="small"]::part(indicator) {
  width: 17px;
  height: 17px
}
x-radio[size="large"]::part(indicator) {
  width: 21px;
  height: 21px;
}

/* Label */
x-radio > x-label {
  margin: 0 0 0 8px;
  padding: 1px 0;
}
x-radio[size="small"] > x-label {
  margin-left: 6px;
}
x-radio[size="large"] > x-label {
  margin-left: 10px;
}

/*****************************************************************************************************************/

/**
 * Radios
 */

x-radios:not(:defined) {
  display: none;
}

/*****************************************************************************************************************/

/**
 * Switch
 */

x-switch + x-switch {
  margin-top: 12px;
}
x-switch:not(:defined) {
  display: none;
}

/* Indicator */
x-switch[size="large"]::part(indicator) {
  width: 42px;
  height: 20px;
}
x-switch[size="small"]::part(indicator) {
  width: 28px;
  height: 12px;
}

/* Label */
x-switch > x-label {
  margin: 0 0 0 8px;
  padding: 1px 0;
}
x-switch[size="small"] > x-label {
  margin-left: 6px;
}
x-switch[size="large"] > x-label {
  margin-left: 10px;
}

/*****************************************************************************************************************/

/**
 * Select
 */

x-select[size="small"] {
  height: 24px;
}
x-select[size="large"] {
  height: 38px;
}
x-select:not(:defined) {
  display: none;
}

/*****************************************************************************************************************/

/**
 * Color select
 */

x-colorselect[size="small"] {
  width: 24px;
  height: 24px;
}
x-colorselect[size="large"] {
  width: 38px;
  height: 38px;
}
x-colorselect:not(:defined) {
  display: none;
}

/*****************************************************************************************************************/

/**
 * Input
 */

x-input[size="small"] {
  height: 24px;
}
x-input[size="large"] {
  height: 38px;
}
x-input:not(:defined) {
  display: none;
}
x-input + x-input {
  margin-top: 20px;
}

/* Icon */
x-input > x-icon {
  width: 15px;
  height: 15px;
  min-width: 15px;
  margin: 0 0 0 8px;
}
x-input[size="small"] > x-icon {
  transform: scale(0.8);
}
x-input[size="large"] > x-icon {
  transform: scale(1.1);
}
x-input > x-icon:hover {
  cursor: default;
}

/* Placeholder */
x-input > x-label {
  display: none;
  position: absolute;
  top: 50%;
  max-width: 100%;
  padding: 0 5px 0 5px;
  transform: translateY(-50%);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
x-input[empty] > x-label {
  display: block;
}
x-input > x-icon + x-label {
  padding: 0 5px 0 29px;
}

/*****************************************************************************************************************/

/**
 * Number input
 */

x-numberinput[size="small"] {
  height: 24px;
}
x-numberinput[size="large"] {
  height: 38px;
}
x-numberinput:focus {
  z-index: 10;
}
x-numberinput:not(:defined) {
  display: none;
}

/* Placeholder */
x-numberinput > x-label {
  display: none;
  position: absolute;
  top: 50%;
  max-width: 100%;
  padding: 0 5px 0 5px;
  transform: translateY(-50%);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
x-numberinput[empty] > x-label {
  display: block;
}

/* Error message */
x-numberinput[size="small"][error]::before {
  top: 27px;
}
x-numberinput[size="large"][error]::before {
  top: 41px;
}

/*****************************************************************************************************************/

/**
 * Text editor
 */

x-texteditor:focus {
  z-index: 10;
}
x-texteditor:not(:defined) {
  display: none;
}

/* Placeholder */
x-texteditor > x-label {
  display: none;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  padding: 2px 6px;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  pointer-events: none;
}
x-texteditor[empty] > x-label {
  display: block;
}

/*****************************************************************************************************************/

/**
 * Slider
 */

x-slider:not(:defined) {
  display: none;
}

/*****************************************************************************************************************/

/**
 * Color picker
 */

x-colorpicker:not(:defined) {
  display: none;
}

/*****************************************************************************************************************/

/**
 * Progressbar
 */

x-progressbar[size="small"] {
  height: 6px;
}
x-progressbar[size="large"] {
  height: 10px;
}
x-progressbar:not(:defined) {
  display: none;
}

/*****************************************************************************************************************/

/**
 * Throbber
 */

x-throbber[size="small"] {
  width: 26px;
  height: 26px;
}
x-throbber[size="large"] {
  width: 34px;
  height: 34px;
}
x-throbber:not(:defined) {
  display: none;
}

/*****************************************************************************************************************/

/**
 * Titlebar
 */

x-titlebar x-icon + x-label {
  margin-left: 6px;
}