$c-nightmode: #222;
$ct-nightmode: rgba($c-white, 0.05);
$c-nightmode-light: #444;
$c-blue: #65a3e1;
$c-blue-dark: #344460;

.window-app.nightmode {
  .window-content {
    background: $c-nightmode;
    background-image:
      linear-gradient(#333, #333),
      url('../../assets/heath-alseike-vector-edge-nightmode.svg');
    background-repeat: no-repeat;
    background-size:
      100% 264px,
      100%;
    background-position:
      0 0,
      0 262px;
    background-attachment: local;
    box-shadow: rgba($c-black, 0.5);
    color: $c-white;

    .items-list {
      .item + .item {
        border-color: $c-nightmode-light !important;
      }
    }

    .sheet-notifications {
      .error,
      .warning {
        color: $c-white !important;
      }
    }

    .cell__title,
    .cell__subtitle,
    .result-label {
      color: $c-blue;
    }

    input[type="text"],
    input[type="number"],
    textarea,
    .editor {
      background: $c-nightmode-light !important;
      color: $c-white !important;
      box-shadow: 0 0 12px 0 rgba($c-black, 0.25);
      border: 1px solid transparent;

      &:hover,
      &:focus {
        background: #555 !important;
        border: 1px solid $c-blue;
      }
    }

    select,
    select option {
      background: #444 !important;
      color: $c-white !important;
    }

    .sheet-header {
      background: $c-blue-dark !important;

      input[type="text"],
      input[type="number"],
      textarea,
      .editor {
        background: $ct-nightmode !important;
        box-shadow: none;
      }
    }

    .sheet-attributes {
      .cell__title {
        background: $c-blue-dark !important;

        &.rollable {
          &:hover {
            background: $c-blue !important;
          }
        }
      }

      .encumbered {
        .cell__title {
          background-color: #a35d03 !important;
        }
      }

      .overencumbered {
        .cell__title {
          background-color: #8b3e3e !important;
        }
      }
    }

    .level-up {
      .cell__description {
        background-color: rgba($c-black, 0.25);
      }

      .cell__subtitle {
        color: $c-white !important;
        background-color: $c-blue-dark;
      }
    }

    button,
    a.entity-link,
    a.inline-roll {
      background: $c-blue !important;
      color: $c-white !important;

      i {
        color: $c-white !important;
      }

      &.toggle {
        background: rgba($c-white, 0.15) !important;
      }

      &:hover {
        opacity: 0.7;
      }
    }

    .editor {
      button {
        background: transparent !important;
        color: $c-white !important;

        svg {
          fill: $c-white !important;
        }

        &:hover {
          svg {
            fill: $c-blue !important;
          }
        }

        &.tox-tbtn--disabled {
          opacity: 0.5 !important;

          &:hover svg {
            fill: $c-white !important;
          }
        }
      }

      .tox:not(.tox-tinymce-inline) .tox-editor-header {
        background: transparent;
      }

      .tox-edit-area {
        background: rgba($c-white, 0.85);
        padding: 10px;
      }
    }

    .drop-area {
      border-color: rgba($c-white, 0.5) !important;
    }

    .tag {
      background: $c-blue-dark;
      color: $c-white;

      &.unprepared {
        background: #6d3838;
      }
    }

    .tabs {
      border-color: $c-blue;

      .item {
        background: rgba($c-blue, 0.5);
        color: $c-white;
        border-color: $c-blue;

        &:hover,
        &.active {
          background: $c-blue;
          color: $c-white;
          border-color: $c-blue;
        }
      }
    }

    .tagify {
      background: #111 !important;
      color: #ddd !important;

      --tags-border-color: #222;
      --tags-hover-border-color: #CCC;
      --tags-focus-border-color: #3595f6;
      --tag-bg: #344460;
      --tag-hover: #65a3e1;
      --tag-text-color: #fff;
      --tag-text-color--edit: #fff;
      --tag-pad: 0.3em 0.5em;
      --tag-inset-shadow-size: 1.1em;
      --tag-invalid-color: #D39494;
      --tag-invalid-bg: rgba(211, 148, 148, 0.5);
      --tag-remove-bg: rgba(211, 148, 148, 0.3);
      --tag-remove-btn-bg: none;
      --tag-remove-btn-bg--hover: #c77777;
      --placeholder-color: #ddd;
    }
  }
}

$c-nightmode: #222;
$ct-nightmode: rgba($c-white, 0.05);
$c-nightmode-light: #444;
$c-blue: #65a3e1;
$c-blue-dark: #344460;