:root {
  --app-size-px: 1px;
  --app-size-basis: 4px;
}

/* ----- ----- */
/* Simple */
/* ----- ----- */

/* 
Если суффикс записан как:
- px = 1px
- N = 4px * N
*/

/* Spacing */

.app-gap-px {
  gap: var(--app-size-px);
}

.app-gap-3 {
  gap: calc(var(--app-size-basis) * 3);
}

/* Sizing */

.app-h-full {
  height: 100%;
}

.app-w-full {
  width: 100%;
}

.app-h-8 {
  height: calc(var(--app-size-basis) * 8);
}

/* ----- ----- */
/* Complex */
/* ----- ----- */

/* Toolkits */

.app-toolkit-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 2px;
  background-color: var(--v-surface-base)
}

.app-tool-window {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 0px 2px 2px;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: var(--v-surface-base);
  z-index: 11;
  user-select: none;
}

.app-tool-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 auto;
  gap: 1px;
}

.app-tool-actionbar {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  min-height: 32px;
}
.app-tool-body {
  background-color: #ffffff;
  overflow: auto;
  flex: 1 1 auto;
}
.app-tool-list {
  background-color: #ffffff;
}

/* Windows */

.app-window {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 0px 2px 2px;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: var(--v-surface-base);
  z-index: 10;
}

.app-window-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 auto;
  gap: 1px;
}

.app-window-actionbar {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  min-height: 32px;
  justify-content: space-between;
}

.app-window-body {
  background-color: #ffffff;
  overflow: auto;
  flex: 1 1 auto;
}

.app-window-list {
  background-color: #ffffff;
}