@mixin scheme($property, $light-value, $dark-value) {
  #{$property}: $light-value;
  @media (prefers-color-scheme: dark) {
    #{$property}: $dark-value;
  }
}

body {
  background: transparent;
  margin: 0;
  overflow: hidden;
  font-size: 15px;
  font-family: var(--sans-serif);
}
:root {
  --page-background: #fff;
  --color: #000;
  --titlebar-height: 46px;
  --titlebar-height: 0px;
  --label-background: #ddd;
  --selected-background: #d5d5d5;
  --hover-background: #ddd;
  --border-color: #e3e3e3;
  --sans-serif: -apple-system, BlinkMacSystemFont, system-ui, "Roboto", "Oxygen",
    "Cantarell", "Droid Sans", "Helvetica Neue", "Noto Sans CJK JP", sans-serif;
  --monospace: D2Coding, "source-code-pro", Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

@media (prefers-color-scheme: light) {
  :root.mac {
    --page-background: #f7f7f7;
  }
}

html,
body,
#app {
  height: 100%;
}

#app {
  background-color: var(--page-background);
  position: relative;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color: #fff;
    --label-background: #353535;
    --selected-background: #353535;
    --border-color: #333;
    --hover-background: #222;
    --page-background: #292929;
  }
  body {
    color: #fff;
  }
}

pre,
code {
  font-family: var(--monospace);
}

input {
  font-family: inherit;
  font-size: inherit;
}
@mixin input {
  @include scheme(background-color, #fff, #2d2d2d);
  border-radius: 6px;
  border: 1px solid #fff;
  @include scheme(border-color, #cdc7c2, #1b1b1b);
  transition: 0.1s;
  &:focus {
    @include scheme(border-color, #3584e480, #15539e);
  }
}

input[type="search"],
input[type="text"],
input[type="number"],
input[type="password"] {
  @include input;
  border-radius: 6px;
  color: inherit;
  outline: none;
  padding: 7px 8px;
  &:disabled {
    cursor: not-allowed;
  }
}
input[type="checkbox" i] {
  @include input;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
    inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 9px;
  border-radius: 3px;
  appearance: none;
  position: relative;
  &:checked:after {
    content: "\2714";
    font-size: 1rem;
    position: absolute;
    top: 0px;
    left: 3px;
    color: var(--color);
  }
}

button,
select,
.button {
  @include scheme(background-color, #f6f5f4, #333);
  border-radius: 4px;
  border: 1px solid;
  @include scheme(border-color, #cdc7c2, #1b1b1b);
  color: inherit;
  font-family: inherit;
  &:hover {
    @include scheme(background-color, #f9f9f8, #363636);
  }
  &:active {
    @include scheme(background-color, #d6d1cd, #292929);
  }
}
button {
  padding: 8px 15px;
  box-shadow: rgb(0 0 0 / 7%) 0px 1px 2px;
  transition: 0.1s;
}
button[type="submit"] {
  background-color: #15539e;
  color: #fff;
}
select {
  padding: 5px 10px;
}

// #region color
.color-primary,
.color-secondary,
.color-info,
.color-danger {
  @include scheme(color, #fff, #fafafa);
}
.color-success,
.color-warning {
  @include scheme(color, #000, #111);
}
.color-primary {
  @include scheme(background-color, #0b5ed7, #375a7f);
}
.color-secondary {
  @include scheme(background-color, #6c757d, #626262);
}
.color-success {
  @include scheme(background-color, #198754, #00bc8c);
}
.color-info {
  @include scheme(background-color, #0dcaf0, #17a2b8);
}
.color-warning {
  @include scheme(background-color, #ffc107, #f39c12);
}
.color-danger {
  @include scheme(background-color, #dc3545, #e74c3c);
}
// #endregion