@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($primary, 72%) !default;
$bgcolor-list-active: lighten($primary, 65%) !default;
$color-list-active: color-yiq($bgcolor-list-active) !default;
$color-table: $color-global !default;
$bgcolor-table: null !default;
$border-color-table: $gray-200 !default;
$color-table-hover: $color-table !default;
$bgcolor-table-hover: rgba(black, 0.075) !default;
$bgcolor-sidebar-list-group: $bgcolor-list !default;
$color-tags: $secondary !default;
$bgcolor-tags: $gray-200 !default;
$border-color-global: $gray-300 !default;
$border-color-toc: $border-color-global !default;
$color-dropdown: $color-global !default;
$color-dropdown-link: $color-global !default;
$color-dropdown-link-hover: $color-global !default;
$color-dropdown-link-active: $color-reversal !default;
$bgcolor-dropdown-link-active: $primary !default;

// override bootstrap variables
$text-muted: $gray-500;
$table-color: $color-table;
$table-bg: $bgcolor-table;
$table-border-color: $border-color-table;
$table-hover-color: $color-table-hover;
$table-hover-bg: $bgcolor-table-hover;
$border-color: $border-color-global;
$dropdown-color: $color-dropdown;
$dropdown-link-color: $color-dropdown-link;
$dropdown-link-hover-color: $color-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
 */
.form-control {
  background-color: $bgcolor-global;
}

.form-control::placeholder {
  color: darken($bgcolor-global, 20%);
}

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

/*
 * card
 */
.card.card-disabled {
  background-color: darken($bgcolor-card, 5%);
  border-color: $gray-200;
}

/*
 * GROWI Login form
 */
.nologin {
  // background color
  $color-gradient: #3e4d6c;
  background: linear-gradient(45deg, darken($color-gradient, 30%) 0%, hsla(340, 100%, 55%, 0) 70%),
    linear-gradient(135deg, var.$growi-green 10%, hsla(225, 95%, 50%, 0) 70%), linear-gradient(225deg, var.$growi-blue 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(white, 0.5);

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

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

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

  .dropdown-with-icon {
    .dropdown-toggle {
      color: white;
      background-color: rgba($gray-600, 0.7);
      box-shadow: unset;
      &:focus {
        color: white;
        background-color: rgba($gray-600, 0.7);
      }
    }
    i {
      color: darken(white, 30%);
      background-color: rgba($gray-700, 0.7);
    }
  }

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

    .form-control {
      color: white;
      background-color: rgba($gray-600, 0.7);
      box-shadow: unset;

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

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

    &:hover,
    &.focus {
      color: black;

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

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

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

.grw-drawer-toggler {
  @extend .btn-light;
  color: $gray-500;
}

/*
 * 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);
  // sidebar-centent-bg
  .grw-navigation-wrap {
    // Drop a shadow on the light theme. The dark theme makes '$ bgcolor-sidebar-context' brighter than the body.
    box-shadow: 0px 0px 3px rgba(black, 0.24);
  }
  // Pagetree
  .grw-pagetree {
    @include override-list-group-item-for-pagetree(
      $color-sidebar-context,
      darken($bgcolor-sidebar-context, 5%),
      darken($bgcolor-sidebar-context, 12%),
      lighten($color-sidebar-context, 10%),
      lighten($color-sidebar-context, 8%),
      darken($bgcolor-sidebar-context, 15%),
      darken($bgcolor-sidebar-context, 24%)
    );
    .grw-pagetree-triangle-btn {
      @include mixins-buttons.button-outline-svg-icon-variant($gray-400, $primary);
    }
  }

  // Foldertree
  .grw-foldertree {
    @include override-list-group-item-for-pagetree(
      $color-sidebar-context,
      darken($bgcolor-sidebar-context, 5%),
      darken($bgcolor-sidebar-context, 12%),
      lighten($color-sidebar-context, 10%),
      lighten($color-sidebar-context, 8%),
      darken($bgcolor-sidebar-context, 15%),
      darken($bgcolor-sidebar-context, 24%)
    );
    .grw-foldertree-triangle-btn {
      @include mixins.button-outline-svg-icon-variant($gray-400, $primary);
    }
  }

  // bookmark
  .grw-bookmarks-list {
    @include override-list-group-item-for-pagetree(
      $color-sidebar-context,
      darken($bgcolor-sidebar-context, 5%),
      darken($bgcolor-sidebar-context, 12%),
      lighten($color-sidebar-context, 10%),
      lighten($color-sidebar-context, 8%),
      darken($bgcolor-sidebar-context, 15%),
      darken($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,
      darken($body-bg, 5%),
      darken($body-bg, 12%),
      lighten($body-color, 10%),
      lighten($body-color, 8%),
      darken($body-bg, 15%),
      darken($body-bg, 24%)
    );
    .grw-foldertree-triangle-btn {
      @include mixins.button-outline-svg-icon-variant($gray-400, $primary);
    }
  }
  .page-list > .grw-bookmarks-list-container > .list-group {
    @include override-list-group-item-for-pagetree(
      $body-color,
      darken($body-bg, 5%),
      darken($body-bg, 12%),
      lighten($body-color, 10%),
      lighten($body-color, 8%),
      darken($body-bg, 15%),
      darken($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($gray-400, $primary);
      .grw-bookmark-folder-menu-item-title {
        color: $body-color
      }
    }
  }
}

.btn.btn-page-item-control {
  @include button-outline-variant($gray-500, $primary, lighten($primary, 52%), transparent);
  @include hover() {
    background-color: lighten($primary, 58%);
  }
  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active {
    color: $primary;
  }
  box-shadow: none !important;
}

/*
 * GROWI page list
 */
.page-list {
  .page-list-ul {
    > li {
      > span.page-list-meta {
        color: lighten($color-global, 10%);
      }
    }
  }
  // List group
  .list-group-item {
    .page-list-snippet {
      color: lighten($body-color, 10%);
    }
  }
}

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

/*
 * GROWI Editor
 */
.grw-editor-navbar-bottom {
  background-color: $gray-50;

  #slack-mark-white {
    display: none;
  }

  .input-group-text {
    margin-right: 1px;
    color: $secondary;
    border-color: $light;
  }

  .btn.btn-outline-secondary {
    border-color: $border-color;
  }
}

/*
 * GROWI Link Edit Modal
 */
.link-edit-modal {
  span i {
    color: $gray-400;
  }
}

/*
 * GROWI Grid Edit Modal
 */

.grw-grid-edit-preview {
  background: $gray-100;
}

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

  .form-control {
    background: white;
  }

  .custom-control-label {
    &::before {
      background-color: $gray-200;
      border-color: transparent;
    }
    &::after {
      background-color: white;
      background-image: url(/images/icons/slack/slack-logo-off.svg);
    }
  }
  .custom-control-input:checked ~ .custom-control-label {
    &::before {
      background-color: lighten($color-slack, 60%);
    }
    &::after {
      background-image: url(/images/icons/slack/slack-logo-on.svg);
    }
  }
  .grw-slack-logo svg {
    fill: #af30b0;
  }

  .grw-btn-slack {
    background-color: white;

    &:hover,
    &:focus {
      background-color: white;
    }
  }

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

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

.wiki {
  h1 {
    border-color: $border-color-theme;
  }
  h2 {
    border-color: $border-color-theme;
  }
}

/*
 * GROWI comment form
 */
.comment-form {
  #slack-mark-white {
    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;
  }
}

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

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

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

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

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

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