adwaita-web/dist/adwaita/adwaita.js

A GTK inspired toolkit designed to build awesome web apps

var adwaita_default = `
* {
  box-sizing: border-box;
}

/*************
* Constants  *
*************/
/*************
* Colors     *
*************/
/*************
* Dimensions *
*************/
/**
* Darkens the specified css variable by the specified amount.
* The specified amount must be a multiple of 5%, up to 50%.
* Not all css variables support this function.
*
* @param {\`var(\${string})\`} $colorVariable - The css variable to darken.
* @param {\`\${number}%\`} $amount - The amount to darken the css variable by.
*/
/**
* Lightens the specified css variable by the specified amount.
* The specified amount must be a multiple of 5%, up to 50%.
* Not all css variables support this function.
*
* @param {\`var(\${string})\`} $colorVariable - The css variable to darken.
* @param {\`\${number}%\`} $amount - The amount to lighten the css variable by.
*/
/**
* Desaturates the specified css variable by the specified amount.
* The specified amount must be a multiple of 5%, up to 50%.
* Not all css variables support this function.
*
* @param {\`var(\${string})\`} $colorVariable - The css variable to darken.
* @param {\`\${number}%\`} $amount - The amount to desature the css variable by.
*/
/**
* Transparentizes the specified css variable by the specified amount.
* The specified amount must be a multiple of 0.1, up to 1.
* Not all css variables support this function.
*
* @param {\`var(\${string})\`} $colorVariable - The css variable to darken.
* @param {number} $amount - The amount to transparentizes the css variable by.
*/
/***************************
 * Check and Radio buttons *
 ***************************/
/**********************
 * General Typography *
 **********************/
body {
  font-family: "Cantarell", "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, "Source Code Pro", Menlo, Monaco, Consolas, "Courier New", monospace;
}

.title-large {
  font-weight: 300;
  font-size: 24pt;
}

h1 {
  font-weight: 800;
  font-size: 20pt;
}

h2 {
  font-weight: 800;
  font-size: 15pt;
}

h3 {
  font-weight: 700;
  font-size: 15pt;
}

h4 {
  font-weight: 700;
  font-size: 13pt;
}

html,
body {
  font-weight: 400;
  font-size: 11pt;
}

.heading {
  font-weight: 700;
  font-size: 11pt;
}

.caption-heading {
  font-weight: 700;
  font-size: 9pt;
}

.caption {
  font-weight: 400;
  font-size: 9pt;
}

button {
  font-size: inherit;
  font-family: inherit;
}

code {
  font-size: 0.9em;
  padding: 1px 4px;
  color: var(--text-color);
  background-color: var(--code-bg-color);
  border: 1px solid var(--code-border-color);
  border-radius: 3px;
}

pre {
  font-size: 0.9em;
  padding: 1px 4px;
  color: var(--text-color);
  background-color: var(--code-bg-color);
  border: 1px solid var(--code-border-color);
  border-radius: 3px;
}

.text-info {
  color: var(--info-color);
  --icon-color: var(--info-color);
}

.text-success {
  color: var(--success-color);
  --icon-color: var(--success-color);
}

.text-warning {
  color: var(--warning-color);
  --icon-color: var(--warning-color);
}

.text-danger {
  color: var(--destructive-color);
  --icon-color: var(--destructive-color);
}

.text-muted {
  color: var(--insensitive-fg-color);
  --icon-color: var(--insensitive-fg-color);
}

.text-italic {
  font-style: italic;
}

.text-bold {
  font-weight: 700;
}

.weight-100 {
  font-weight: 100;
}

.weight-200 {
  font-weight: 200;
}

.weight-300 {
  font-weight: 300;
}

.weight-400 {
  font-weight: 400;
}

.weight-500 {
  font-weight: 500;
}

.weight-600 {
  font-weight: 600;
}

.weight-700 {
  font-weight: 700;
}

.weight-800 {
  font-weight: 800;
}

.weight-900 {
  font-weight: 900;
}

/***************
 * Variables   *
 ***************/
/***************
 * Selections  *
 ***************/
*::selection {
  background-color: var(--selected-bg-color);
  color: var(--selected-fg-color);
}

/***************
 * Scrollbars  *
 ***************/
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background-color: transparent;
  padding: 0 5px;
}

*::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  background-color: #bbb;
  border: 2px solid transparent;
  border-radius: 5px;
  margin: 0 2px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}

*::-webkit-scrollbar-thumb:active {
  background-color: #888;
}

/* Nice scrollbars */
/***************
 * Utils       *
 ***************/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.user-select-none {
  user-select: none;
}

.fill {
  width: 100%;
  height: 100%;
}

.fill-width {
  width: 100%;
}

.fill-height {
  height: 100%;
}

.growable.grow, listview.grow,
list.grow,
.grow.List, .grow.Paned, .grow.HeaderBar__title, .grow.Text, .grow.Label, .grow.Box {
  flex-grow: 1;
}
.growable.grow-1, listview.grow-1,
list.grow-1,
.grow-1.List, .grow-1.Paned, .grow-1.HeaderBar__title, .grow-1.Text, .grow-1.Label, .grow-1.Box {
  flex-grow: 1;
}
.growable.grow-2, listview.grow-2,
list.grow-2,
.grow-2.List, .grow-2.Paned, .grow-2.HeaderBar__title, .grow-2.Text, .grow-2.Label, .grow-2.Box {
  flex-grow: 2;
}
.growable.grow-3, listview.grow-3,
list.grow-3,
.grow-3.List, .grow-3.Paned, .grow-3.HeaderBar__title, .grow-3.Text, .grow-3.Label, .grow-3.Box {
  flex-grow: 3;
}
.growable.grow-4, listview.grow-4,
list.grow-4,
.grow-4.List, .grow-4.Paned, .grow-4.HeaderBar__title, .grow-4.Text, .grow-4.Label, .grow-4.Box {
  flex-grow: 4;
}
.growable.grow-5, listview.grow-5,
list.grow-5,
.grow-5.List, .grow-5.Paned, .grow-5.HeaderBar__title, .grow-5.Text, .grow-5.Label, .grow-5.Box {
  flex-grow: 5;
}
.growable.grow-6, listview.grow-6,
list.grow-6,
.grow-6.List, .grow-6.Paned, .grow-6.HeaderBar__title, .grow-6.Text, .grow-6.Label, .grow-6.Box {
  flex-grow: 6;
}
.growable.grow-7, listview.grow-7,
list.grow-7,
.grow-7.List, .grow-7.Paned, .grow-7.HeaderBar__title, .grow-7.Text, .grow-7.Label, .grow-7.Box {
  flex-grow: 7;
}
.growable.grow-8, listview.grow-8,
list.grow-8,
.grow-8.List, .grow-8.Paned, .grow-8.HeaderBar__title, .grow-8.Text, .grow-8.Label, .grow-8.Box {
  flex-grow: 8;
}
.growable.grow-9, listview.grow-9,
list.grow-9,
.grow-9.List, .grow-9.Paned, .grow-9.HeaderBar__title, .grow-9.Text, .grow-9.Label, .grow-9.Box {
  flex-grow: 9;
}
.growable.grow-10, listview.grow-10,
list.grow-10,
.grow-10.List, .grow-10.Paned, .grow-10.HeaderBar__title, .grow-10.Text, .grow-10.Label, .grow-10.Box {
  flex-grow: 10;
}
.growable.grow-999, listview.grow-999,
list.grow-999,
.grow-999.List, .grow-999.Paned, .grow-999.HeaderBar__title, .grow-999.Text, .grow-999.Label, .grow-999.Box {
  flex-grow: 999;
}

/***************
 * Base States *
 ***************/
.background {
  color: var(--fg-color);
  background-color: var(--bg-color);
}
.window-inactive .background {
  text-shadow: none;
  --icon-shadow: none;
}

.background-low {
  background-color: var(--background-low-color);
}

.background-default {
  background-color: var(--background-default-color);
}

.background-medium {
  background-color: var(--background-medium-color);
}

.background-high {
  background-color: var(--background-high-color);
}

/***************
 * Layout      *
 ***************/
.separator {
  border-bottom: 1px solid var(--lighten-borders-color);
  border-right: 1px solid var(--lighten-borders-color);
  min-width: 1px;
  min-height: 1px;
}

.Box.horizontal {
  display: flex;
  flex-direction: row;
}
.Box.horizontal > *:not(:last-child) {
  margin-right: 1rem;
}
.Box.horizontal.compact > *:not(:last-child) {
  margin-right: 0;
}
.Box.vertical {
  display: flex;
  flex-direction: column;
}
.Box.vertical > *:not(:last-child) {
  margin-bottom: 1rem;
}
.Box.vertical.compact > *:not(:last-child) {
  margin-bottom: 0;
}
.Box.inline {
  display: inline-flex;
}
.Box.align {
  align-items: center;
}
.Box.align-center {
  align-items: center;
}
.Box.align-start {
  align-items: flex-start;
}
.Box.align-end {
  align-items: flex-end;
}
.Box.justify {
  justify-content: center;
}
.Box.justify-center {
  justify-content: center;
}
.Box.justify-start {
  justify-content: flex-start;
}
.Box.justify-end {
  justify-content: flex-end;
}
.Box.space-around {
  justify-content: space-around;
}
.Box.space-between {
  justify-content: space-between;
}
.Box.fill {
  display: inline-flex;
  width: 100%;
  height: 100%;
}
.Box.fill-width {
  display: inline-flex;
  width: 100%;
}
.Box.fill-height {
  display: inline-flex;
  height: 100%;
}
.Box.padded {
  padding: 1em;
}
.Box.expand-children > * {
  flex: 1;
}
.Box.border {
  border: 1px solid var(--borders-color);
}

.Box__fill {
  flex: 1;
}

.Box__fill.expand-children > * {
  width: 100%;
  height: 100%;
}

.view, .IconView {
  color: var(--text-color);
  background-color: var(--base-color);
}
.view:disabled, .IconView:disabled {
  color: var(--insensitive-fg-color);
  background-color: var(--insensitive-bg-color);
}
.view.selected:focus, .selected.IconView:focus, .view.selected, .selected.IconView {
  border-radius: 3px;
}

.IconView {
  outline: 0 solid transparent;
  outline-offset: 4px;
}
.IconView:focus:focus-visible {
  outline-color: var(--focus-borders-color);
  outline-width: 2px;
  outline-offset: -2px;
}
.IconView.dnd-active {
  box-shadow: none;
}
.IconView > dndtarget.dnd-active {
  border-style: solid;
  border-width: 1px;
  border-color: var(--selected-borders-color);
}

.Flowbox > .Flowbox__child {
  padding: 3px;
  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.Flowbox > .Flowbox__child {
  outline: 0 solid transparent;
  outline-offset: 4px;
}
.Flowbox > .Flowbox__child:focus:focus-visible {
  outline-color: var(--focus-borders-color);
  outline-width: 2px;
  outline-offset: -2px;
}
.Flowbox > .Flowbox__child.selected {
  outline-color: var(--alt-focus-borders-color);
}

.Grid > .Grid__child {
  padding: 3px;
  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.Grid > .Grid__child {
  outline: 0 solid transparent;
  outline-offset: 4px;
}
.Grid > .Grid__child:focus:focus-visible {
  outline-color: var(--focus-borders-color);
  outline-width: 2px;
  outline-offset: -2px;
}
.Grid > .Grid__child.selected {
  outline-color: var(--alt-focus-borders-color);
}
.Grid > .Grid__child .Grid__box {
  border-spacing: 8px;
  margin: 12px;
}

.SelectionArea, .content-view > .SelectionArea, .table > .SelectionArea, .Flowbox > .SelectionArea, .Grid > .SelectionArea {
  border: 1px solid var(--dimmed-selected-bg-color);
  background-color: var(--dimmed-transparent-selected-bg-color);
}

/*********
 * Links *
 *********/
.link {
  color: var(--link-color);
  text-decoration: underline;
  cursor: pointer;
  transition: color 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 5px;
}
.link {
  position: relative;
  outline: none;
  overflow: visible;
}
.link::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 2;
  display: inline-block;
  border: 2px solid transparent;
  border-radius: inherit;
  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  top: -4px;
  left: -4px;
  width: calc(100% - -4px);
  height: calc(100% - -4px);
}
.link:focus:focus-visible {
  outline: none;
}
.link:focus:focus-visible::after {
  border: 2px solid var(--focus-borders-color);
  top: -2px;
  left: -2px;
  width: 100%;
  height: 100%;
}
.link:not(:disabled):not(.disabled):visited {
  color: var(--link-visited-color);
}
*.selected .link:not(:disabled):not(.disabled):visited {
  color: var(--link-selected-visited-color);
}
.link:not(:disabled):not(.disabled):hover {
  color: var(--link-hover-color);
}
*.selected .link:not(:disabled):not(.disabled):hover {
  color: var(--link-selected-hover-color);
}
.link:not(:disabled):not(.disabled):active {
  color: var(--link-color);
}
*.selected .link:not(:disabled):not(.disabled):active {
  color: var(--link-active-selected-color);
}
.link:disabled {
  color: var(--link-disabled-color);
}
.link.selected,
*.selected .link {
  color: var(--link-selected-color);
}

/***********
 * Heading *
 **********/
.Heading {
  position: relative;
}
.Heading:hover .Heading__anchor {
  opacity: 0.5;
}

.Heading__anchor {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  height: 100%;
  line-height: 100%;
  padding-right: 4px;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--fg-color) !important;
  text-decoration: none !important;
}

/*****************
 * Labels & Text *
 ****************/
.Label {
  outline: 0 solid transparent;
  outline-offset: 4px;
}
.Label:focus:focus-visible {
  outline-color: var(--focus-borders-color);
  outline-width: 2px;
  outline-offset: -2px;
}
.Label.mini {
  height: 18px;
  line-height: 18px;
  min-height: 18px;
  font-size: 11px;
  --icon-size: 12px;
}
.Label.small {
  height: 22px;
  line-height: 22px;
  min-height: 22px;
  font-size: 12px;
  --icon-size: 13px;
}
.Label.medium {
  height: 28px;
  line-height: 28px;
  min-height: 28px;
  font-size: 14px;
  --icon-size: 16px;
}
.Label.large {
  height: 36px;
  line-height: 36px;
  min-height: 36px;
  font-size: 18px;
  --icon-size: 20px;
}
.Label.huge {
  height: 42px;
  line-height: 42px;
  min-height: 42px;
  font-size: 20px;
  --icon-size: 23px;
}
.Label.mega {
  height: 58px;
  line-height: 58px;
  min-height: 58px;
  font-size: 28px;
  --icon-size: 32px;
}
.Label::selection {
  background-color: var(--selected-bg-color);
  color: var(--selected-fg-color);
}
.Label.disabled {
  color: var(--insensitive-fg-color);
}
.Button .Label.disabled {
  color: inherit;
}
.Label.info {
  color: var(--info-color);
}
.Label.info.disabled {
  color: var(--info-color-transparentize-50, var(--info-color));
}
.Label.success {
  color: var(--success-color);
}
.Label.success.disabled {
  color: var(--success-color-transparentize-50, var(--success-color));
}
.Label.warning {
  color: var(--warning-color);
}
.Label.warning.disabled {
  color: var(--warning-color-transparentize-50, var(--warning-color));
}
.Label.danger {
  color: var(--danger-color);
}
.Label.danger.disabled {
  color: var(--danger-color-transparentize-50, var(--danger-color));
}
.Label.title {
  color: var(--insensitive-fg-color);
  font-weight: 700;
}
.Label.align-left {
  text-align: left;
}
.Label.align-center {
  text-align: center;
}
.Label.align-right {
  text-align: right;
}
.Label.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.Label.fill {
  width: 100%;
  height: 100%;
}
.Label.fill-width {
  width: 100%;
}
.Label.fill-height {
  height: 100%;
}

.Text {
  margin: 0;
}
.Text.mini {
  font-size: 13.2px;
  line-height: 1.4;
  --icon-size: 12px;
}
.Text.small {
  font-size: 14.4px;
  line-height: 1.4;
  --icon-size: 13px;
}
.Text.medium {
  font-size: 16.8px;
  line-height: 1.4;
  --icon-size: 16px;
}
.Text.large {
  font-size: 21.6px;
  line-height: 1.4;
  --icon-size: 20px;
}
.Text.huge {
  font-size: 24px;
  line-height: 1.4;
  --icon-size: 23px;
}
.Text.mega {
  font-size: 33.6px;
  line-height: 1.4;
  --icon-size: 32px;
}
.Text.hero {
  font-size: 24px;
  font-weight: 300;
  line-height: 1.4;
}
.Text.align-left {
  text-align: left;
}
.Text.align-center {
  text-align: center;
}
.Text.align-right {
  text-align: right;
}
.Text.info {
  color: var(--info-color);
}
.Text.success {
  color: var(--success-color);
}
.Text.warning {
  color: var(--warning-color);
}
.Text.danger {
  color: var(--danger-color);
}

.dim-label, .titlebar:not(.HeaderBar) .subtitle,
.HeaderBar .subtitle, .InputNumber.vertical > .Input__area > input > .Input__area > input::placeholder, .InputNumber:not(.vertical) > .Input__area > input::placeholder,
.Input > .Input__area > input::placeholder, .Label.separator {
  opacity: 0.55;
  text-shadow: none;
}

.osd .scale-popup, .app-notification,
.osd {
  color: var(--osd-fg-color);
  border: none;
  background-color: var(--osd-bg-color);
  background-clip: padding-box;
  text-shadow: 0 1px black;
  --icon-shadow: 0 1px black;
}

/************
 * Alerts   *
 ***********/
.Alert {
  border: 1px solid var(--borders-color);
  border-left-width: 6px;
  border-radius: 5px;
  padding: 8px;
}
.Alert.info {
  color: var(--fg-color);
  --icon-color: var(--info-color-desaturate-30, var(--info-color));
  background-color: var(--panel-info-color);
  border-color: var(--panel-info-color-darken-10, var(--panel-info-color));
}
.Alert.info a {
  color: var(--fg-color-darken-10, var(--fg-color));
  font-weight: bold;
}
.Alert.info a:not(:disabled):not(.disabled):hover {
  color: var(--fg-color-darken-5, var(--fg-color));
}
.Alert.info .Alert__close {
  color: var(--fg-color);
  outline-color: var(--alt-focus-borders-color);
  border-color: var(--panel-info-color-darken-10, var(--panel-info-color));
  border-bottom-color: var(--panel-info-color-darken-20, var(--panel-info-color));
  background-color: var(--panel-info-color);
  box-shadow: inset 0 1px transparent, 0 1px 2px var(--shadow-color-transparentize-10, var(--shadow-color));
}
.Alert.info .Alert__close::before {
  content: " ";
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.03), transparent);
  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.Alert.info .Alert__close:not(:disabled):not(.disabled).hover, .Alert.info .Alert__close:not(:disabled):not(.disabled):hover {
  color: var(--fg-color);
  border-color: var(--panel-info-color-darken-10, var(--panel-info-color));
  border-bottom-color: var(--panel-info-color-darken-20, var(--panel-info-color));
  background-color: var(--panel-info-color);
  box-shadow: inset 0 1px var(--panel-info-color-darken-5, var(--panel-info-color)), 0 1px 2px var(--shadow-color-transparentize-10, var(--shadow-color));
}
.adwaita-dark-theme .Alert.info .Alert__close:not(:disabled):not(.disabled).hover, .adwaita-dark-theme .Alert.info .Alert__close:not(:disabled):not(.disabled):hover {
  box-shadow: inset 0 1px var(--panel-info-color), 0 1px 2px var(--shadow-color-transparentize-10, var(--shadow-color));
}
.Alert.info .Alert__close:not(:disabled):not(.disabled).hover::before, .Alert.info .Alert__close:not(:disabled):not(.disabled):hover::before {
  opacity: 0;
}
.Alert.info .Alert__close:not(:disabled):not(.disabled).active, .Alert.info .Alert__close:not(:disabled):not(.disabled):active {
  color: var(--fg-color);
  border-color: var(--panel-info-color-darken-10, var(--panel-info-color));
  background-color: var(--panel-info-color-darken-15, var(--panel-info-color));
  box-shadow: inset 0 1px rgba(0, 0, 0, 0);
  text-shadow: none;
  --icon-shadow: none;
}
.adwaita-dark-theme .Alert.info .Alert__close:not(:disabled):not(.disabled).active, .adwaita-dark-theme .Alert.info .Alert__close:not(:disabled):not(.disabled):active {
  background-color: var(--panel-info-color-darken-5, var(--panel-info-color));
}
.Alert.info .Alert__close:not(:disabled):not(.disabled).active::before, .Alert.info .Alert__close:not(:disabled):not(.disabled):active::before {
  opacity: 0;
}
.Alert.success {
  color: var(--fg-color);
  --icon-color: var(--success-color-desaturate-30, var(--success-color));
  background-color: var(--panel-success-color);
  border-color: var(--panel-success-color-darken-10, var(--panel-success-color));
}
.Alert.success a {
  color: var(--fg-color-darken-10, var(--fg-color));
  font-weight: bold;
}
.Alert.success a:not(:disabled):not(.disabled):hover {
  color: var(--fg-color-darken-5, var(--fg-color));
}
.Alert.success .Alert__close {
  color: var(--fg-color);
  outline-color: var(--alt-focus-borders-color);
  border-color: var(--panel-success-color-darken-10, var(--panel-success-color));
  border-bottom-color: var(--panel-success-color-darken-20, var(--panel-success-color));
  background-color: var(--panel-success-color);
  box-shadow: inset 0 1px transparent, 0 1px 2px var(--shadow-color-transparentize-10, var(--shadow-color));
}
.Alert.success .Alert__close::before {
  content: " ";
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.03), transparent);
  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.Alert.success .Alert__close:not(:disabled):not(.disabled).hover, .Alert.success .Alert__close:not(:disabled):not(.disabled):hover {
  color: var(--fg-color);
  border-color: var(--panel-success-color-darken-10, var(--panel-success-color));
  border-bottom-color: var(--panel-success-color-darken-20, var(--panel-success-color));
  background-color: var(--panel-success-color);
  box-shadow: inset 0 1px var(--panel-success-color-darken-5, var(--panel-success-color)), 0 1px 2px var(--shadow-color-transparentize-10, var(--shadow-color));
}
.adwaita-dark-theme .Alert.success .Alert__close:not(:disabled):not(.disabled).hover, .adwaita-dark-theme .Alert.success .Alert__close:not(:disabled):not(.disabled):hover {
  box-shadow: inset 0 1px var(--panel-success-color), 0 1px 2px var(--shadow-color-transparentize-10, var(--shadow-color));
}
.Alert.success .Alert__close:not(:disabled):not(.disabled).hover::before, .Alert.success .Alert__close:not(:disabled):not(.disabled):hover::before {
  opacity: 0;
}
.Alert.success .Alert__close:not(:disabled):not(.disabled).active, .Alert.success .Alert__close:not(:disabled):not(.disabled):active {
  color: var(--fg-color);
  border-color: var(--panel-success-color-darken-10, var(--panel-success-color));
  background-color: var(--panel-success-color-darken-15, var(--panel-success-color));
  box-shadow: inset 0 1px rgba(0, 0, 0, 0);
  text-shadow: none;
  --icon-shadow: none;
}
.adwaita-dark-theme .Alert.success .Alert__close:not(:disabled):not(.disabled).active, .adwaita-dark-theme .Alert.success .Alert__close:not(:disabled):not(.disabled):active {
  background-color: var(--panel-success-color-darken-5, var(--panel-success-color));
}
.Alert.success .Alert__close:not(:disabled):not(.disabled).active::before, .Alert.success .Alert__close:not(:disabled):not(.disabled):active::before {
  opacity: 0;
}
.Alert.warning {
  color: var(--fg-color);
  --icon-color: var(--warning-color-desaturate-30, var(--warning-color));
  background-color: var(--panel-warning-color);
  border-color: var(--panel-warning-color-darken-10, var(--panel-warning-color));
}
.Alert.warning a {
  color: var(--fg-color-darken-10, var(--fg-color));
  font-weight: bold;
}
.Alert.warning a:not(:disabled):not(.disabled):hover {
  color: var(--fg-color-darken-5, var(--fg-color));
}
.Alert.warning .Alert__close {
  color: var(--fg-color);
  outline-color: var(--alt-focus-borders-color);
  border-color: var(--panel-warning-color-darken-10, var(--panel-warning-color));
  border-bottom-color: var(--panel-warning-color-darken-20, var(--panel-warning-color));
  background-color: var(--panel-warning-color);
  box-shadow: inset 0 1px transparent, 0 1px 2px var(--shadow-color-transparentize-10, var(--shadow-color));
}
.Alert.warning .Alert__close::before {
  content: " ";
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.03), transparent);
  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.Alert.warning .Alert__close:not(:disabled):not(.disabled).hover, .Alert.warning .Alert__close:not(:disabled):not(.disabled):hover {
  color: var(--fg-color);
  border-color: var(--panel-warning-color-darken-10, var(--panel-warning-color));
  border-bottom-color: var(--panel-warning-color-darken-20, var(--panel-warning-color));
  background-color: var(--panel-warning-color);
  box-shadow: inset 0 1px var(--panel-warning-color-darken-5, var(--panel-warning-color)), 0 1px 2px var(--shadow-color-transparentize-10, var(--shadow-color));
}
.adwaita-dark-theme .Alert.warning .Alert__close:not(:disabled):not(.disabled).hover, .adwaita-dark-theme .Alert.warning .Alert__close:not(:disabled):not(.disabled):hover {
  box-shadow: inset 0 1px var(--panel-warning-color), 0 1px 2px var(--shadow-color-transparentize-10, var(--shadow-color));
}
.Alert.warning .Alert__close:not(:disabled):not(.disabled).hover::before, .Alert.warning .Alert__close:not(:disabled):not(.disabled):hover::before {
  opacity: 0;
}
.Alert.warning .Alert__close:not(:disabled):not(.disabled).active, .Alert.warning .Alert__close:not(:disabled):not(.disabled):active {
  color: var(--fg-color);
  border-color: var(--panel-warning-color-darken-10, var(--panel-warning-color));
  background-color: var(--panel-warning-color-darken-15, var(--panel-warning-color));
  box-shadow: inset 0 1px rgba(0, 0, 0, 0);
  text-shadow: none;
  --icon-shadow: none;
}
.adwaita-dark-theme .Alert.warning .Alert__close:not(:disabled):not(.disabled).active, .adwaita-dark-theme .Alert.warning .Alert__close:not(:disabled):not(.disabled):active {
  background-color: var(--panel-warning-color-darken-5, var(--panel-warning-color));
}
.Alert.warning .Alert__close:not(:disabled):not(.disabled).active::before, .Alert.warning .Alert__close:not(:disabled):not(.disabled):active::before {
  opacity: 0;
}
.Alert.danger {
  color: var(--fg-color);
  --icon-color: var(--danger-color-desaturate-30, var(--danger-color));
  background-color: var(--panel-danger-color);
  border-color: var(--panel-danger-color-darken-10, var(--panel-danger-color));
}
.Alert.danger a {
  color: var(--fg-color-darken-10, var(--fg-color));
  font-weight: bold;
}
.Alert.danger a:not(:disabled):not(.disabled):hover {
  color: var(--fg-color-darken-5, var(--fg-color));
}
.Alert.danger .Alert__close {
  color: var(--fg-color);
  outline-color: var(--alt-focus-borders-color);
  border-color: var(--panel-danger-color-darken-10, var(--panel-danger-color));
  border-bottom-color: var(--panel-danger-color-darken-20, var(--panel-danger-color));
  background-color: var(--panel-danger-color);
  box-shadow: inset 0 1px transparent, 0 1px 2px var(--shadow-color-transparentize-10, var(--shadow-color));
}
.Alert.danger .Alert__close::before {
  content: " ";
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.03), transparent);
  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.Alert.danger .Alert__close:not(:disabled):not(.disabled).hover, .Alert.danger .Alert__close:not(:disabled):not(.disabled):hover {
  color: var(--fg-color);
  border-color: var(--panel-danger-color-darken-10, var(--panel-danger-color));
  border-bottom-color: var(--panel-danger-color-darken-20, var(--panel-danger-color));
  background-color: var(--panel-danger-color);
  box-shadow: inset 0 1px var(--panel-danger-color-darken-5, var(--panel-danger-color)), 0 1px 2px var(--shadow-color-transparentize-10, var(--shadow-color));
}
.adwaita-dark-theme .Alert.danger .Alert__close:not(:disabled):not(.disabled).hover, .adwaita-dark-theme .Alert.danger .Alert__close:not(:disabled):not(.disabled):hover {
  box-shadow: inset 0 1px var(--panel-danger-color), 0 1px 2px var(--shadow-color-transparentize-10, var(--shadow-color));
}
.Alert.danger .Alert__close:not(:disabled):not(.disabled).hover::before, .Alert.danger .Alert__close:not(:disabled):not(.disabled):hover::before {
  opacity: 0;
}
.Alert.danger .Alert__close:not(:disabled):not(.disabled).active, .Alert.danger .Alert__close:not(:disabled):not(.disabled):active {
  color: var(--fg-color);
  border-color: var(--panel-danger-color-darken-10, var(--panel-danger-color));
  background-color: var(--panel-danger-color-darken-15, var(--panel-danger-color));
  box-shadow: inset 0 1px rgba(0, 0, 0, 0);
  text-shadow: none;
  --icon-shadow: none;
}
.adwaita-dark-theme .Alert.danger .Alert__close:not(:disabled):not(.disabled).active, .adwaita-dark-theme .Alert.danger .Alert__close:not(:disabled):not(.disabled):active {
  background-color: var(--panel-danger-color-darken-5, var(--panel-danger-color));
}
.Alert.danger .Alert__close:not(:disabled):not(.disabled).active::before, .Alert.danger .Alert__close:not(:disabled):not(.disabled):active::before {
  opacity: 0;
}
.Alert {
  color: var(--fg-color);
  --icon-color: var(--fg-color-desaturate-30, var(--fg-color));
  background-color: var(--panel-default-color);
  border-color: var(--panel-default-color-darken-10, var(--panel-default-color));
}
.Alert a {
  color: var(--fg-color-darken-10, var(--fg-color));
  font-weight: bold;
}
.Alert a:not(:disabled):not(.disabled):hover {
  color: var(--fg-color-darken-5, var(--fg-color));
}
.Alert .Alert__close {
  color: var(--fg-color);
  outline-color: var(--alt-focus-borders-color);
  border-color: var(--panel-default-color-darken-10, var(--panel-default-color));
  border-bottom-color: var(--panel-default-color-darken-20, var(--panel-default-color));
  background-color: var(--panel-default-color);
  box-shadow: inset 0 1px transparent, 0 1px 2px var(--shadow-color-transparentize-10, var(--shadow-color));
}
.Alert .Alert__close::before {
  content: " ";
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.03), transparent);
  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.Alert .Alert__close:not(:disabled):not(.disabled).hover, .Alert .Alert__close:not(:disabled):not(.disabled):hover {
  color: var(--fg-color);
  border-color: var(--panel-default-color-darken-10, var(--panel-default-color));
  border-bottom-color: var(--panel-default-color-darken-20, var(--panel-default-color));
  background-color: var(--panel-default-color);
  box-shadow: inset 0 1px var(--panel-default-color-darken-5, var(--panel-default-color)), 0 1px 2px var(--shadow-color-transparentize-10, var(--shadow-color));
}
.adwaita-dark-theme .Alert .Alert__close:not(:disabled):not(.disabled).hover, .adwaita-dark-theme .Alert .Alert__close:not(:disabled):not(.disabled):hover {
  box-shadow: inset 0 1px var(--panel-default-color), 0 1px 2px var(--shadow-color-transparentize-10, var(--shadow-color));
}
.Alert .Alert__close:not(:disabled):not(.disabled).hover::before, .Alert .Alert__close:not(:disabled):not(.disabled):hover::before {
  opacity: 0;
}
.Alert .Alert__close:not(:disabled):not(.disabled).active, .Alert .Alert__close:not(:disabled):not(.disabled):active {
  color: var(--fg-color);
  border-color: var(--panel-default-color-darken-10, var(--panel-default-color));
  background-color: var(--panel-default-color-darken-15, var(--panel-default-color));
  box-shadow: inset 0 1px rgba(0, 0, 0, 0);
  text-shadow: none;
  --icon-shadow: none;
}
.adwaita-dark-theme .Alert .Alert__close:not(:disabled):not(.disabled).active, .adwaita-dark-theme .Alert .Alert__close:not(:disabled):not(.disabled):active {
  background-color: var(--panel-default-color-darken-5, var(--panel-default-color));
}
.Alert .Alert__close:not(:disabled):not(.disabled).active::before, .Alert .Alert__close:not(:disabled):not(.disabled):active::before {
  opacity: 0;
}

.Alert__icon {
  margin-top: 3px;
  --icon-size: 1.5em;
  opacity: 0.5;
}

.Alert__title {
  font-size: 1.2em;
  margin-bottom: 0.25rem;
}

.Alert__message {
  font-size: 1rem;
}

/****************
 * Icons        *
 ****************/
.normal-icons {
  --icon-size: 16px;
}

.large-icons {
  --icon-size: 32px;
}

.Icon {
  display: flex;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}
.Icon svg {
  --icon-color: var(--base-icon-color);
  width: auto;
  height: var(--icon-size, 16px);
}
.Icon:not(.colored) svg * {
  fill: var(--icon-color, unset) !important;
}
.Icon.colored svg * {
  fill: var(--custom-icon-color, unset) !important;
}
*:disabled .Icon:not(.colored):not(.increase-specificity), .disabled .Icon:not(.colored):not(.increase-specificity) {
  --icon-color: rgba(0, 0, 0, 0.3);
}
*:disabled .Icon.colored:not(.increase-specificity), .disabled .Icon.colored:not(.increase-specificity) {
  opacity: 0.3;
}
.Icon svg {
  transform: scale(0.8);
}

/*********************
 * Spinner Animation *
 *********************/
@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}
.Spinner {
  opacity: 1;
  animation: spin 1s linear infinite;
  display: inline-block;
  width: var(--icon-size, 16px);
  height: var(--icon-size, 16px);
}
.Spinner.disabled {
  opacity: 0.5;
}
.Spinner.hidden {
  opacity: 0;
}

/****************
 * Text Entries *
 ****************/
@keyframes move_along_width {
  0% {
    left: var(--input-padding);
  }
  50% {
    left: calc(100% - var(--progress-indeterminate-width) - var(--input-padding, 8px));
  }
  100% {
    left: var(--input-padding);
  }
}
.InputNumber.vertical > .Input__area > input, .InputNumber:not(.vertical),
.Input {
  --input-padding: 8px;
  --progress-indeterminate-width: 50px;
}
.InputNumber.vertical > .Input__area > input, .InputNumber:not(.vertical),
.Input {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid;
  border-radius: 5px;
  border-spacing: 6px;
  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  color: var(--text-color);
  border-color: var(--borders-color);
  background-color: var(--base-color);
  height: 28px;
  min-height: 28px;
  padding-left: var(--input-padding);
  padding-right: var(--input-padding);
}
.InputNumber.vertical > .Input__area > input, .InputNumber:not(.vertical),
.Input {
  position: relative;
  outline: none;
  overflow: visible;
}
.InputNumber.vertical > .Input__area > input::after, .InputNumber:not(.vertical)::after,
.Input::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 2;
  display: inline-block;
  border: 2px solid transparent;
  border-radius: inherit;
  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  top: -4px;
  left: -4px;
  width: calc(100% - -4px);
  height: calc(100% - -4px);
}
.InputNumber.vertical > .Input__area > input:focus-within, .InputNumber:focus-within:not(.vertical),
.Input:focus-within {
  outline: none;
}
.InputNumber.vertical > .Input__area > input:focus-within::after, .InputNumber:focus-within:not(.vertical)::after,
.Input:focus-within::after {
  border: 2px solid var(--focus-borders-color);
  top: -2px;
  left: -2px;
  width: 100%;
  height: 100%;
}
.InputNumber.vertical > .Input__area > input.mini, .mini.InputNumber:not(.vertical),
.Input.mini {
  height: 18px;
  min-height: 18px;
  --input-padding: calc($height / 4);
  font-size: 11px;
  --icon-size: 12px;
}
.InputNumber.vertical > .Input__area > input.mini > .Input__area, .mini.InputNumber:not(.vertical) > .Input__area,
.Input.mini > .Input__area {
  line-height: 18px;
}
.InputNumber.vertical > .Input__area > input.small, .small.InputNumber:not(.vertical),
.Input.small {
  height: 22px;
  min-height: 22px;
  --input-padding: calc($height / 4);
  font-size: 12px;
  --icon-size: 13px;
}
.InputNumber.vertical > .Input__area > input.small > .Input__area, .small.InputNumber:not(.vertical) > .Input__area,
.Input.small > .Input__area {
  line-height: 22px;
}
.InputNumber.vertical > .Input__area > input.medium, .medium.InputNumber:not(.vertical),
.Input.medium {
  height: 28px;
  min-height: 28px;
  --input-padding: calc($height / 4);
  font-size: 14px;
  --icon-size: 16px;
}
.InputNumber.vertical > .Input__area > input.medium > .Input__area, .medium.InputNumber:not(.vertical) > .Input__area,
.Input.medium > .Input__area {
  line-height: 28px;
}
.InputNumber.vertical > .Input__area > input.large, .large.InputNumber:not(.vertical),
.Input.large {
  height: 36px;
  min-height: 36px;
  --input-padding: calc($height / 4);
  font-size: 18px;
  --icon-size: 20px;
}
.InputNumber.vertical > .Input__area > input.large > .Input__area, .large.InputNumber:not(.vertical) > .Input__area,
.Input.large > .Input__area {
  line-height: 36px;
}
.InputNumber.vertical > .Input__area > input.huge, .huge.InputNumber:not(.vertical),
.Input.huge {
  height: 42px;
  min-height: 42px;
  --input-padding: calc($height / 4);
  font-size: 20px;
  --icon-size: 23px;
}
.InputNumber.vertical > .Input__area > input.huge > .Input__area, .huge.InputNumber:not(.vertical) > .Input__area,
.Input.huge > .Input__area {
  line-height: 42px;
}
.InputNumber.vertical > .Input__area > input.mega, .mega.InputNumber:not(.vertical),
.Input.mega {
  height: 58px;
  min-height: 58px;
  --input-padding: calc($height / 4);
  font-size: 28px;
  --icon-size: 32px;
}
.InputNumber.vertical > .Input__area > input.mega > .Input__area, .mega.InputNumber:not(.vertical) > .Input__area,
.Input.mega > .Input__area {
  line-height: 58px;
}
.InputNumber.vertical > .Input__area > input > .Input__area, .InputNumber:not(.vertical) > .Input__area,
.Input > .Input__area {
  position: relative;
  flex: 1;
  height: 100%;
  overflow: hidden;
}
.InputNumber.vertical > .Input__area > input > .Input__area > input, .InputNumber:not(.vertical) > .Input__area > input,
.Input > .Input__area > input {
  width: 100%;
  height: 100%;
  border: none;
  color: inherit;
  background: none;
  font-size: inherit;
}
.InputNumber.vertical > .Input__area > input > .Input__area > input:focus, .InputNumber:not(.vertical) > .Input__area > input:focus,
.Input > .Input__area > input:focus {
  outline: none;
}
.InputNumber.vertical > .Input__area > input > .Input__area > input::placeholder, .InputNumber:not(.vertical) > .Input__area > input::placeholder,
.Input > .Input__area > input::placeholder {
  user-select: none;
}
.InputNumber.vertical > .Input__area > input > .Input__area > .Input__children, .InputNumber:not(.vertical) > .Input__area > .Input__children,
.Input > .Input__area > .Input__children {
  position: absolute;
  pointer-events: none;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.InputNumber.vertical > .Input__area > input > .Input__area > input:focus + .Input__children, .InputNumber:not(.vertical) > .Input__area > input:focus + .Input__children,
.Input > .Input__area > input:focus + .Input__children {
  opacity: 0.5;
}
.InputNumber.vertical > .Input__area > input > .Input__area > input:not(.empty) + .Input__children, .InputNumber:not(.vertical) > .Input__area > input:not(.empty) + .Input__children,
.Input > .Input__area > input:not(.empty) + .Input__children {
  opacity: 0;
}
.InputNumber.vertical > .Input__area > input .Input__left, .InputNumber:not(.vertical) .Input__left,
.InputNumber.vertical > .Input__area > input .Input__right,
.InputNumber:not(.vertical) .Input__right,
.Input .Input__left,
.Input .Input__right {
  display: flex;
  justify-content: center;
  align-items: center;
}
.InputNumber.vertical > .Input__area > input .Input__left, .InputNumber:not(.vertical) .Input__left,
.Input .Input__left {
  margin-right: 6px;
}
.InputNumber.vertical > .Input__area > input .Input__left .Icon, .InputNumber:not(.vertical) .Input__left .Icon,
.Input .Input__left .Icon {
  margin-left: 6px;
}
.InputNumber.vertical > .Input__area > input .Input__right, .InputNumber:not(.vertical) .Input__right,
.Input .Input__right {
  margin: 0;
  margin-left: 6px;
  padding: 0;
}
.InputNumber.vertical > .Input__area > input .Input__right .Icon, .InputNumber:not(.vertical) .Input__right .Icon,
.Input .Input__right .Icon {
  margin-right: 6px;
}
.InputNumber.vertical > .Input__area > input .Input__left.Button, .InputNumber:not(.vertical) .Input__left.Button,
.InputNumber.vertical > .Input__area > input .Input__right.Button,
.InputNumber:not(.vertical) .Input__right.Button,
.Input .Input__left.Button,
.Input .Input__right.Button {
  opacity: 0.8;
  min-width: unset;
  min-height: unset;
  height: min-content;
}
.InputNumber.vertical > .Input__area > input.flat, .flat.InputNumber:not(.vertical),
.Input.flat:focus-within,
.window-inactive .Input.flat,
.Input.flat:disabled,
.window-inactive .Input.flat:disabled,
.Input.flat {
  min-height: 0;
  padding: 0 2px;
  background-color: transparent;
  border-color: transparent;
  border-radius: 0;
}
.InputNumber.vertical > .Input__area > input:focus-within > .Input__area > input::placeholder, .InputNumber:focus-within:not(.vertical) > .Input__area > input::placeholder,
.Input:focus-within > .Input__area > input::placeholder {
  opacity: 0; /* We hide placeholders on focus */
}
.InputNumber.vertical > .Input__area > input:disabled, .InputNumber:disabled:not(.vertical), .InputNumber.vertical > .Input__area > input.disabled, .disabled.InputNumber:not(.vertical),
.Input:disabled,
.Input.disabled {
  color: var(--insensitive-fg-color);
  border-color: var(--borders-color);
  background-color: var(--insensitive-bg-color);
  box-shadow: none;
}
.InputNumber.vertical > .Input__area > input.error, .error.InputNumber:not(.vertical),
.Input.error {
  border-color: var(--error-color);
}
.InputNumber.vertical > .Input__area > input.error, .error.InputNumber:not(.vertical),
.Input.error {
  position: relative;
  outline: none;
  overflow: visible;
}
.InputNumber.vertical > .Input__area > input.error::after, .error.InputNumber:not(.vertical)::after,
.Input.error::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 2;
  display: inline-block;
  border: 2px solid transparent;
  border-radius: inherit;
  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  top: -4px;
  left: -4px;
  width: calc(100% - -4px);
  height: calc(100% - -4px);
}
.InputNumber.vertical > .Input__area > input.error:focus-within, .error.InputNumber:focus-within:not(.vertical),
.Input.error:focus-within {
  outline: none;
}
.InputNumber.vertical > .Input__area > input.error:focus-within::after, .error.InputNumber:focus-within:not(.vertical)::after,
.Input.error:focus-within::after {
  border: 2px solid var(--error-color-transparentize-50, var(--error-color));
  top: -2px;
  left: -2px;
  width: 100%;
  height: 100%;
}
.InputNumber.vertical > .Input__area > input.error input, .error.InputNumber:not(.vertical) input,
.Input.error input {
  color: var(--error-color);
  animation: u4rty78 1s linear forwards paused;
  animation-delay: -0.2s;
}
@keyframes u4rty78 {
  0% {
    color: var(--error-color);
  }
  100% {
    color: var(--fg-color);
  }
}
.InputNumber.vertical > .Input__area > input.error input::selection, .error.InputNumber:not(.vertical) input::selection,
.Input.error input::selection {
  background-color: var(--error-color);
}
.InputNumber.vertical > .Input__area > input.warning, .warning.InputNumber:not(.vertical),
.Input.warning {
  border-color: var(--warning-color);
}
.InputNumber.vertical > .Input__area > input.warning, .warning.InputNumber:not(.vertical),
.Input.warning {
  position: relative;
  outline: none;
  overflow: visible;
}
.InputNumber.vertical > .Input__area > input.warning::after, .warning.InputNumber:not(.vertical)::after,
.Input.warning::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 2;
  display: inline-block;
  border: 2px solid transparent;
  border-radius: inherit;
  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  top: -4px;
  left: -4px;
  width: calc(100% - -4px);
  height: calc(100% - -4px);
}
.InputNumber.vertical > .Input__area > input.warning:focus-within, .warning.InputNumber:focus-within:not(.vertical),
.Input.warning:focus-within {
  outline: none;
}
.InputNumber.vertical > .Input__area > input.warning:focus-within::after, .warning.InputNumber:focus-within:not(.vertical)::after,
.Input.warning:focus-within::after {
  border: 2px solid var(--warning-color-transparentize-50, var(--warning-color));
  top: -2px;
  left: -2px;
  width: 100%;
  height: 100%;
}
.InputNumber.vertical > .Input__area > input.warning input, .warning.InputNumber:not(.vertical) input,
.Input.warning input {
  color: var(--warning-color);
  animation: u4rty7a 1s linear forwards paused;
  animation-delay: -0.2s;
}
@keyframes u4rty7a {
  0% {
    color: var(--warning-color);
  }
  100% {
    color: var(--fg-color);
  }
}
.InputNumber.vertical > .Input__area > input.warning input::selection, .warning.InputNumber:not(.vertical) input::selection,
.Input.warning input::selection {
  background-color: var(--warning-color);
}
.InputNumber.vertical > .Input__area > input *:not(.InputNumber__button) .Icon, .InputNumber:not(.vertical) *:not(.InputNumber__button) .Icon,
.Input *:not(.InputNumber__button) .Icon {
  --icon-color: var(--base-icon-color);
}
.InputNumber.vertical > .Input__area > input *:not(.InputNumber__button) .Icon:hover, .InputNumber:not(.vertical) *:not(.InputNumber__button) .Icon:hover,
.Input *:not(.InputNumber__button) .Icon:hover {
  --icon-color: var(--fg-color);
}
.InputNumber.vertical > .Input__area > input *:not(.InputNumber__button) .Icon:active, .InputNumber:not(.vertical) *:not(.InputNumber__button) .Icon:active,
.Input *:not(.InputNumber__button) .Icon:active {
  --icon-color: var(--selected-bg-color);
}
.dnd-active .InputNumber.vertical > .Input__area > input, .dnd-active .InputNumber:not(.vertical),
.dnd-active .Input:focus-within,
.dnd-active .Input {
  border-color: var(--drop-target-color);
  box-shadow: inset 0 0 0 1px var(--drop-target-color);
}
.osd .InputNumber.vertical > .Input__area > input, .osd .InputNumber:not(.vertical),
.osd .Input {
  color: var(--osd-text-color);
  border-color: var(--osd-borders-color);
  background-color: var(--osd-borders-color-transparentize-50, var(--osd-borders-color));
  background-clip: padding-box;
  box-shadow: none;
  text-shadow: 0 1px black;
  --icon-shadow: 0 1px black;
}
.osd .InputNumber.vertical > .Input__area > input:focus-within, .osd .InputNumber:focus-within:not(.vertical),
.osd .Input:focus-within {
  color: var(--osd-text-color);
  border-color: var(--selected-bg-color);
  background-color: var(--osd-borders-color-transparentize-50, var(--osd-borders-color));
  background-clip: padding-box;
  text-shadow: 0 1px black;
  --icon-shadow: 0 1px black;
}
.osd .InputNumber.vertical > .Input__area > input:disabled, .osd .InputNumber:disabled:not(.vertical),
.osd .Input:disabled {
  color: var(--osd-insensitive-fg-color);
  border-color: var(--osd-borders-color);
  background-color: var(--osd-insensitive-bg-color);
  background-clip: padding-box;
  box-shadow: none;
  text-shadow: none;
  --icon-shadow: none;
}
.InputNumber.vertical > .Input__area > input .Input__progress, .InputNumber:not(.vertical) .Input__progress,
.Input .Input__progress {
  position: absolute;
  display: inline-block;
  pointer-events: none;
  width: calc(100% - 2 * var(--input-padding, 8px));
  height: calc(100% - 1px);
  top: 0px;
  left: var(--input-padding);
}
.InputNumber.vertical > .Input__area > input .Input__progress .Input__progress__bar, .InputNumber:not(.vertical) .Input__progress .Input__progress__bar,
.Input .Input__progress .Input__progress__bar {
  display: inline-block;
  width: 100%;
  height: 100%;
  border-width: 0 0 2px;
  border-color: var(--selected-bg-color);
  border-style: solid;
}
.InputNumber.vertical > .Input__area > input .Input__progress.indeterminate, .InputNumber:not(.vertical) .Input__progress.indeterminate,
.Input .Input__progress.indeterminate {
  height: calc(100% - 1px);
  width: var(--progress-indeterminate-width);
  animation: move_along_width 2.5s infinite;
}
.InputNumber.vertical > .Input__area.linked:not(.vertical) > input:not(:first-child), .linked:not(.vertical) > .InputNumber:not(:first-child):not(.vertical),
.linked:not(.vertical) > .Input:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.InputNumber.vertical > .Input__area.linked:not(.vertical) > input:not(:last-child), .linked:not(.vertical) > .InputNumber:not(:last-child):not(.vertical),
.linked:not(.vertical) > .Input:not(:last-child) {
  border-right-style: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.InputNumber.vertical > .Input__area.linked.vertical > input:not(:first-child), .linked.vertical > .InputNumber:not(:first-child):not(.vertical),
.linked.vertical > .Input:not(:first-child) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.InputNumber.vertical > .Input__area.linked.vertical > input:not(:last-child), .linked.vertical > .InputNumber:not(:last-child):not(.vertical),
.linked.vertical > .Input:not(:last-child) {
  border-bottom-style: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.InputNumber.vertical > .Input__area.linked.vertical > input:not(:disabled) + entry:not(:disabled), .linked.vertical > .InputNumber:not(:disabled):not(.vertical) + entry:not(:disabled), .InputNumber.vertical > .Input__area.linked.vertical > input:not(:disabled) + input:not(:disabled), .InputNumber.vertical > .Input__area.linked.vertical > .InputNumber:not(:disabled):not(.vertical) + input:not(:disabled), .InputNumber.vertical > .Input__area.linked.vertical > input:not(:disabled) + .InputNumber:not(:disabled):not(.vertical), .linked.vertical > .InputNumber:not(:disabled):not(.vertical) + .InputNumber:not(:disabled):not(.vertical),
.linked.vertical > .Input:not(:disabled) + entry:not(:disabled),
.InputNumber.vertical > .Input__area.linked.vertical > .Input:not(:disabled) + input:not(:disabled),
.linked.vertical > .Input:not(:disabled) + .InputNumber:not(:disabled):not(.vertical) {
  border-top-color: var(--base-color);
  animation: u4rty7x 1s linear forwards paused;
  animation-delay: -0.7s;
}
@keyframes u4rty7x {
  0% {
    border-top-color: var(--borders-color);
  }
  100% {
    border-top-color: var(--base-color);
  }
}
.InputNumber.vertical > .Input__area.linked.vertical > input:disabled + input:disabled, .InputNumber.vertical > .Input__area.linked.vertical > .InputNumber:disabled:not(.vertical) + input:disabled, .InputNumber.v