:root {
  /* Primary color */
  --layout-theme-primary-color: #33c3f0; /* aka rgb(51,195,240) */
  /* Primary colors for hovered elements */
  --layout-theme-primary-color-dark1: #1eaedb; /* aks rgb(30,174,219) */
  --layout-theme-primary-color-dark2: #0fa0ce; /* aks gb(15,160,206) */
  /* Error color */
  --layout-theme-common-error-color: #c33;
  /* Animations */
  --common-animation-time: 250ms;
  --common-effect-time: 500ms;
  /* Main colors */
  --common-error-color: #b00;
  --common-warn-color: #960;
  --common-success-color: #181;
  /* Default table cell widths */
  --common-table-cell-amount-width: 14em;
  --common-table-cell-name-width: auto;
  --common-table-cell-location-width: 12em;
  --common-table-cell-unit-width: 5em;
  --common-table-cell-matched-width: 8em;
  /** Side panels */
  --panels-layout-side-panel-width: 500px;
  --panels-layout-button-size: 38px;
  --panels-layout-actions-offset: 20px;
  --panels-layout-actions-offset-y: 10px;
  --minor-border-color: #eee;
}

/* Basic layout */

/* Issue #7: Widen default Skeleton page width */
.container {
  /* Re-limit max width of column: allow it to be wider */
  max-width: 1600px;
}

/* Loader splash */
.loader-splash {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity var(--common-animation-time);
}
.loader-splash.hidden {
  opacity: 0;
  pointer-events: none;
}
.loader-splash.full-cover {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.loader-splash.full-size {
  flex: 1;
}
/* Background colors */
.loader-splash.bg-white,
.loader-splash.bg-page {
  background-color: #fff;
}
.loader-splash.bg-white-half {
  background-color: rgb(255 255 255 / 50%);
}
.loader-splash.bg-black {
  background-color: #000;
}
.loader-splash.bg-primary {
  background-color: var(--layout-theme-primary-color);
}
.loader-splash.bg-neutral,
.loader-splash.bg-gray {
  background-color: #999;
}

/* Loader spinner */
.loader-spinner {
  position: relative;
}
.loader-spinner,
.loader-spinner::before {
  /* Full-size */
  height: 40px;
  width: 40px;
}
.loader-spinner::before {
  /* Half-size offset */
  margin-top: -20px;
  margin-left: -20px;
  /* Colors */
  border: 2px solid var(--layout-theme-primary-color);
  border-top-color: transparent;
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  animation: loader-spinner-rotating-spinner 1.5s linear infinite;
}
@keyframes loader-spinner-rotating-spinner {
  to {
    transform: rotate(360deg);
  }
}

/* Multicolumn process detail list */
.details-list {
  column-gap: 20px;
  column-rule: 1px solid var(--minor-border-color);
  column-width: 300px;
  list-style-type: none;
  line-height: 1.3;
}
.details-list li {
  margin: 10px 0;
}
/* // UNUSED? Using the same width on the all scren widths?
 * @media (width >= 1300px) {
 *   .details-list {
 *     column-width: 350px;
 *   }
 * }
 */
.details-list label {
  display: inline;
  opacity: 0.5;
  font-weight: normal;
}

/* Panels layout */
/* TODO: Make width adaptive depending on the screen size? */
.panels-layout-side.hidden {
  display: none;
}

/* Panels layout actions */
.panels-layout .panels-layout-actions {
  position: absolute;
  right: var(--panels-layout-actions-offset);
  top: var(--panels-layout-actions-offset-y);
  display: flex;
  gap: 4px;
  z-index: 10;
}
.panels-layout .panels-layout-actions.fixed {
  position: fixed;
}
.panels-layout .panels-layout-actions-button {
  width: var(--panels-layout-button-size);
  height: var(--panels-layout-button-size);
  border-radius: 50%;
  background-color: var(--layout-theme-primary-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--common-animation-time);
  opacity: 0.5;
}
.panels-layout .panels-layout-actions-button:hover {
  opacity: 1;
}
.panels-layout .panels-layout-actions-button.turnaround {
  transform: rotate(-90deg);
}
.panels-layout .panels-layout-actions-button.turnaround.turned {
  transform: rotate(90deg);
}
.panels-layout-content.padded {
  margin: 20px auto;
}
.panels-layout-side:not(.hidden) {
  border-bottom: 1px solid var(--minor-border-color);
}

/* TODO: To use vars for media queries? Eg, for `panels-layout-min-threshold`? */
@media (width >= 700px) {
  .panels-layout-container.padded {
    padding: 20px;
  }
  .panels-layout-full {
    flex: 1;
  }
  .panels-layout-content.padded {
    margin: 20px;
  }
  .panels-layout-content {
    width: auto;
  }
  .panels-layout-side {
    border-bottom: none;
  }
  .panels-layout {
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: stretch;
    flex-direction: row-reverse;
  }
  .panels-layout-container {
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    /* flex-direction: row-reverse; */
  }
  .panels-layout-side.hidden,
  .panels-layout-side {
    display: block;
  }
  .panels-layout-main,
  .panels-layout-side {
    box-sizing: border-box;
    position: relative;
  }
  .panels-layout .panels-layout-scrollable {
    overflow: auto;
  }
  .panels-layout-main {
    width: auto;
    /* padding: 0 20px; */
    flex: 1;
  }
  .panels-layout-side {
    transition: all 1s;
    width: var(--panels-layout-side-panel-width);
    flex-shrink: 0;
    opacity: 1;
  }
  .panels-layout-side:not(.hidden).panels-layout-right {
    border-left: 1px solid var(--minor-border-color);
  }
  .panels-layout-side.hidden {
    opacity: 0;
    pointer-events: none;
  }
  .panels-layout-side.hidden.panels-layout-right {
    margin-right: calc(var(--panels-layout-side-panel-width) * -1);
  }

  .panels-layout .panels-layout-actions-button.turnaround {
    transform: rotate(0deg);
  }
  .panels-layout .panels-layout-actions-button.turnaround.turned {
    transform: rotate(180deg);
  }
}
