// 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, 3%) !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;

// override bootstrap variables
$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;

@import 'reboot-bootstrap-border-colors';
@import 'reboot-bootstrap-tables';

// 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,
textarea.form-control {
  color: lighten($color-global, 30%);
  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;
}

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

/*
 * Dropdown
 */
.dropdown-menu {
  background-color: $bgcolor-global;
}

.dropdown-item {
  &:hover {
    color: $light;
    background-color: lighten($bgcolor-global, 15%);
  }
}

/*
 * 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($growi-green, 30%) 10%, hsla(225, 95%, 50%, 0) 70%),
    linear-gradient(225deg, darken($growi-blue, 20%) 10%, hsla(140, 90%, 50%, 0) 80%),
    linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);

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

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

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

  .login-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($growi-green, 5%);
      }

      .org {
        color: darken($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%);
      }
    }
  }
}

/*
 * 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);
}

/*
 * 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;
  }
}

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

/*
* grw-side-contents
*/
.grw-side-contents-sticky-container {
  .grw-border-vr {
    border-color: $border-color-toc;
  }

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

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