@use '../variables' as var;
@use '../bootstrap/init' as *;
@use '../atoms/mixins/buttons' as mixins-buttons;
@use './mixins/count-badge';

// determine optional variables
$color-list: $color-global !default;
$bgcolor-list: $bgcolor-global !default;
$color-list-hover: $color-global !default;
$bgcolor-list-hover: lighten($bgcolor-global, 8%) !default;
$color-list-active: $color-reversal !default;
$bgcolor-list-active: $primary !default;
$bgcolor-subnav: lighten($bgcolor-global, 3%) !default;
$color-table: white !default;
$bgcolor-table: #343a40 !default;
$border-color-table: lighten($bgcolor-table, 7.5%) !default;
$color-table-hover: rgba(white, 0.075) !default;
$bgcolor-table-hover: lighten($bgcolor-table, 7.5%) !default;
$bgcolor-sidebar-list-group: $bgcolor-list !default;
$color-tags: #949494 !default;
$bgcolor-tags: $dark !default;
$border-color-global: $gray-500 !default;
$border-color-toc: $border-color-global !default;
$color-dropdown: $color-global !default;
$bgcolor-dropdown: $bgcolor-global !default;
$color-dropdown-link: $color-global !default;
$color-dropdown-link-hover: $light !default;
$bgcolor-dropdown-link-hover: lighten($bgcolor-global, 15%) !default;
$color-dropdown-link-active: $light !default;
$bgcolor-dropdown-link-active: $primary !default;

// override bootstrap variables
$text-muted: $gray-550;
$table-dark-color: $color-table;
$table-dark-bg: $bgcolor-table;
$table-dark-border-color: $border-color-table;
$table-dark-hover-color: $color-table-hover;
$table-dark-hover-bg: $bgcolor-table-hover;
$border-color: $border-color-global;
$dropdown-color: $color-dropdown;
$dropdown-bg: $bgcolor-dropdown;
$dropdown-link-color: $color-dropdown-link;
$dropdown-link-hover-color: $color-dropdown-link-hover;
$dropdown-link-hover-bg: $bgcolor-dropdown-link-hover;
$dropdown-link-active-color: $color-dropdown-link-active;
$dropdown-link-active-bg: $bgcolor-dropdown-link-active;

@import './mixins/list-group';
@import './reboot-bootstrap-text';
@import './reboot-bootstrap-border-colors';
@import './reboot-bootstrap-tables';
@import './reboot-bootstrap-dropdown';

// List Group
@include override-list-group-item($color-list, $bgcolor-list, $color-list-hover, $bgcolor-list-hover, $color-list-active, $bgcolor-list-active);

/*
  * Form
  */
input.form-control,
select.form-control,
select.custom-select,
textarea.form-control {
  color: $color-global;
  background-color: darken($bgcolor-global, 5%);
  border-color: $border-color-global;
  &:focus {
    background-color: $bgcolor-global;
  }
  // FIXME: accent color
  // border: 1px solid darken($border, 30%);
}

.form-control[disabled],
.form-control[readonly] {
  color: lighten($color-global, 10%);
  background-color: lighten($bgcolor-global, 5%);
}

.input-group > .input-group-prepend > .input-group-text {
  color: theme-color('light');
  background-color: theme-color('secondary');
  border: 1px solid theme-color('secondary');
  border-right: none;
  &.text-muted {
    color: theme-color('light') !important;
  }
}

.input-group input {
  border-color: $border-color-global;
}

label.custom-control-label::before {
  background-color: darken($bgcolor-global, 5%);
}

/*
 * Table
 */
.table {
  @extend .table-dark;
}

/*
 * Card
 */
.card:not([class*='bg-']):not(.well):not(.card-disabled) {
  @extend .bg-dark;
}

// [TODO] GW-3219 modify common color of well in dark theme, then remove below css.
.card.well {
  border-color: $secondary;
}

.card.card-disabled {
  background-color: lighten($dark, 10%);
  border-color: $secondary;
}

/*
 * Pagination
 */
ul.pagination {
  li.page-item {
    button.page-link {
      @extend .btn-dark;
    }
  }
}

/*
 * GROWI Login form
 */
.nologin {
  // background color
  $color-gradient: #3c465c;
  background: linear-gradient(45deg, darken($color-gradient, 30%) 0%, hsla(340, 100%, 55%, 0) 70%),
    linear-gradient(135deg, darken(var.$growi-green, 30%) 10%, hsla(225, 95%, 50%, 0) 70%),
    linear-gradient(225deg, darken(var.$growi-blue, 20%) 10%, hsla(140, 90%, 50%, 0) 80%),
    linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);

  .nologin-header {
    background-color: rgba(black, 0.5);

    .logo {
      background-color: rgba(white, 0);
      fill: rgba(white, 0.5);
    }

    h1 {
      color: rgba(white, 0.5);
    }
  }

  .nologin-dialog {
    background-color: rgba(black, 0.5);
  }

  .input-group {
    .input-group-text {
      color: darken(white, 30%);
      background-color: rgba($gray-700, 0.7);
    }

    .form-control {
      color: white;
      background-color: rgba(#505050, 0.7);
      box-shadow: unset;

      &::placeholder {
        color: darken(white, 30%);
      }
    }
  }

  .btn-fill {
    .btn-label {
      color: $gray-300;
    }
    .btn-label-text {
      color: $gray-400;
    }
  }

  .grw-external-auth-form {
    border-color: gray !important;
  }

  .btn-external-auth-tab {
    @extend .btn-dark;
  }

  // footer link text
  .link-growi-org {
    color: rgba(white, 0.4);

    &:hover,
    &.focus {
      color: rgba(white, 0.7);

      .growi {
        color: darken(var.$growi-green, 5%);
      }

      .org {
        color: darken(var.$growi-blue, 5%);
      }
    }
  }
}

/*
 * GROWI subnavigation
 */
.grw-drawer-toggler {
  @extend .btn-dark;
  color: $gray-400;
}

/*
 * GROWI page list
 */
.page-list {
  .page-list-ul {
    > li {
      > span.page-list-meta {
        color: darken($color-global, 10%);
      }
    }
  }

  // List group
  .list-group-item {
    &.active {
      background-color: lighten($bgcolor-global, 9%) !important;
    }
    .list-group-item-action:hover {
      background-color: $bgcolor-list-hover;
    }
    .page-list-snippet {
      color: darken($body-color, 10%);
    }
  }
}

/*
 * GROWI ToC
 */
.revision-toc-content {
  ::marker {
    color: lighten($bgcolor-global, 30%);
  }
}

/*
 * GROWI subnavigation
 */
.grw-subnav {
  background-color: $bgcolor-subnav;
}

.grw-subnav-fixed-container .grw-subnav {
  background-color: rgba($bgcolor-subnav, 0.85);
}

.grw-page-editor-mode-manager {
  .btn-outline-primary {
    &:hover {
      color: $primary;
      background-color: $gray-700;
    }
  }
}

// Search drop down
#search-typeahead-asynctypeahead {
  background-color: $bgcolor-global;
  .table {
    background-color: transparent;
  }
}

/*
 * GROWI Sidebar
 */
.grw-sidebar {
  // List
  @include override-list-group-item($color-list, $bgcolor-sidebar-list-group, $color-list-hover, $bgcolor-list-hover, $color-list-active, $bgcolor-list-active);

  // Pagetree
  .grw-pagetree {
    @include override-list-group-item-for-pagetree(
      $color-sidebar-context,
      lighten($bgcolor-sidebar-context, 8%),
      lighten($bgcolor-sidebar-context, 15%),
      darken($color-sidebar-context, 15%),
      darken($color-sidebar-context, 10%),
      lighten($bgcolor-sidebar-context, 18%),
      lighten($bgcolor-sidebar-context, 24%)
    );
    .grw-pagetree-triangle-btn {
      @include mixins-buttons.button-outline-svg-icon-variant($secondary, $gray-200);
    }
    .btn-page-item-control {
      @include button-outline-variant($gray-500, $gray-500, $secondary, transparent);
      @include hover() {
        background-color: lighten($bgcolor-sidebar-context, 20%);
      }
      &:not(:disabled):not(.disabled):active,
      &:not(:disabled):not(.disabled).active {
        background-color: lighten($bgcolor-sidebar-context, 34%);
      }
      box-shadow: none !important;
    }
  }

  // Foldertree
  .grw-foldertree {
    @include override-list-group-item-for-pagetree(
      $color-sidebar-context,
      lighten($bgcolor-sidebar-context, 8%),
      lighten($bgcolor-sidebar-context, 15%),
      darken($color-sidebar-context, 15%),
      darken($color-sidebar-context, 10%),
      lighten($bgcolor-sidebar-context, 18%),
      lighten($bgcolor-sidebar-context, 24%)
    );
    .grw-foldertree-triangle-btn {
      @include mixins.button-outline-svg-icon-variant($secondary, $gray-200);
    }
    .btn-page-item-control {
      @include button-outline-variant($gray-500, $gray-500, $secondary, transparent);
      @include hover() {
        background-color: lighten($bgcolor-sidebar-context, 20%);
      }
      &:not(:disabled):not(.disabled):active,
      &:not(:disabled):not(.disabled).active {
        background-color: lighten($bgcolor-sidebar-context, 34%);
      }
      box-shadow: none !important;
    }
  }

  // bookmarks
  .grw-bookmarks-list {
    @include override-list-group-item-for-pagetree(
      $color-sidebar-context,
      lighten($bgcolor-sidebar-context, 8%),
      lighten($bgcolor-sidebar-context, 15%),
      darken($color-sidebar-context, 15%),
      darken($color-sidebar-context, 10%),
      lighten($bgcolor-sidebar-context, 18%),
      lighten($bgcolor-sidebar-context, 24%)
    );
  }
  .private-legacy-pages-link {
    &:hover {
      background: $bgcolor-list-hover;
    }
  }
}

.grw-user-page-list-m {
  @include override-list-group-item($color-list, $bgcolor-sidebar-list-group, $color-list-hover, $bgcolor-list-hover, $color-list-active, $bgcolor-list-active);
  .grw-foldertree {
    @include override-list-group-item-for-pagetree(
      $body-color,
      lighten($body-bg, 8%),
      lighten($body-bg, 15%),
      darken($body-color, 15%),
      darken($body-color, 10%),
      lighten($body-bg, 18%),
      lighten($body-bg, 24%)
    );
    .grw-foldertree-triangle-btn {
      @include mixins.button-outline-svg-icon-variant($secondary, $gray-200);
    }
  }
  .page-list > .grw-bookmarks-list-container > .list-group {
    @include override-list-group-item-for-pagetree(
      $body-color,
      lighten($body-bg, 8%),
      lighten($body-bg, 15%),
      darken($body-color, 15%),
      darken($body-color, 10%),
      lighten($body-bg, 18%),
      lighten($body-bg, 24%)
    );
  }
}

// Bookmark dropdown menu
.grw-bookmark-folder-dropdown  {
  .grw-bookmark-folder-menu {
    .form-control{
      &:focus {
        color: $body-color
      }
    }
    .grw-bookmark-folder-menu-item  {
      @include mixins.button-outline-svg-icon-variant($secondary, $gray-200);
      .grw-bookmark-folder-menu-item-title {
        color: $body-color
      }
    }
  }
}

.btn.btn-page-item-control {
  @include button-outline-variant($gray-500, $gray-500, $secondary, transparent);
  @include hover() {
    background-color: $gray-700;
  }
  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active {
    color: $gray-200;
    background-color: $gray-600;
  }
  box-shadow: none !important;
}

/*
 * Popover
 */
.popover {
  background-color: $bgcolor-global;
  border-color: $secondary;
  .popover-header {
    color: $white;
    background-color: $secondary;
    border-color: $secondary;
  }
  .popover-body {
    color: inherit;
  }

  &.bs-popover-top .arrow {
    &::before {
      border-top-color: $secondary;
    }

    &::after {
      border-top-color: $bgcolor-global;
    }
  }
  &.bs-popover-bottom .arrow {
    &::before {
      border-bottom-color: $secondary;
    }

    &::after {
      border-bottom-color: $bgcolor-global;
    }
  }
  &.bs-popover-right .arrow {
    &::before {
      border-right-color: $secondary;
    }

    &::after {
      border-right-color: $bgcolor-global;
    }
  }
  &.bs-popover-left .arrow {
    &::before {
      border-left-color: $secondary;
    }

    &::after {
      border-left-color: $bgcolor-global;
    }
  }
}

/*
 * GROWI Grid Edit Modal
 */
.grw-grid-edit-preview {
  background: $gray-900;
}

/*
 * Slack
 */
.grw-slack-notification {
  background-color: transparent;
  $color-slack: #4b144c;

  .form-control {
    background: $bgcolor-global;
  }

  .custom-control-label {
    &::before {
      background-color: $secondary;
      border-color: transparent;
    }
    &::after {
      background-color: darken($color-slack, 5%);
      background-image: url(/images/icons/slack/slack-logo-dark-off.svg);
    }
  }

  .custom-control-input:checked ~ .custom-control-label {
    &::before {
      background-color: lighten($color-slack, 10%);
    }
    &::after {
      background-color: darken($color-slack, 5%);
      background-image: url(/images/icons/slack/slack-logo-dark-on.svg);
    }
  }
  .grw-slack-logo svg {
    fill: #dd80de;
  }

  .grw-btn-slack {
    background-color: black;
    &:focus,
    &:hover {
      background-color: black;
    }
  }

  .grw-btn-slack-triangle {
    color: $secondary;
  }
}

/*
 * GROWI HandsontableModal
 */
.grw-hot-modal-navbar {
  background-color: $dark;
}

.wiki {
  h1 {
    border-color: lighten($border-color-theme, 10%);
  }
  h2 {
    border-color: $border-color-theme;
  }
}

/*
 * GROWI comment form
 */
.comment-form {
  #slack-mark-black {
    display: none;
  }
}

.page-comments-row {
  background: $bgcolor-subnav;
}

/*
 * GROWI tags
 */
.grw-tag-labels {
  .grw-tag-label {
    color: $color-tags;
    background-color: $bgcolor-tags;
  }
}

/*
 * GROWI popular tags
 */
.grw-popular-tag-labels {
  .grw-tag-label {
    color: $color-tags;
    background-color: $bgcolor-tags;
  }
}

/*
 * admin settings
 */
.admin-setting-header {
  border-color: $border-color-global;
}

/*
* grw-side-contents
*/
.grw-side-contents-sticky-container {
  .grw-count-badge {
    @include count-badge.count-badge($gray-400, $gray-700);
  }

  .grw-border-vr {
    border-color: $border-color-toc;
  }

  .revision-toc {
    border-color: $border-color-toc;
  }
}

/*
 * drawio
 */
.drawio-viewer {
  border-color: $border-color-global;
}

/*
 * modal
 */
.grw-modal-head {
  border-color: $border-color-global;
}

/*
 * skeleton
 */
.grw-skeleton {
  background-color: lighten($bgcolor-subnav, 15%);
}
