@use '../../styles/variables' as *;
@use '../../styles/bootstrap/variables' as *;
@use '../../styles/theme/mixins/page-editor-mode-manager';

$bgcolor-theme: rgb(18, 86, 163);
$themelight: #f4f5f6;
$subthemecolor: rgb(88, 130, 250);
$lightthemecolor: rgba(181, 203, 247, 0.61);

.main {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-fluid {
    padding-top: 30px;
    padding-bottom: 30px;
    background-color: white;
    border-radius: 0.35em;
  }
}

.user-page-footer {
  margin-top: 3rem;
  margin-bottom: 3rem;
  background-color: white;
  border-radius: 0.35em;
}

// Light Mode
.theme :global {
  // Background colors
  $bgcolor-navbar: white;
  $bgcolor-navbar-active: $bgcolor-theme;
  $bgcolor-global: $themelight;
  $bgcolor-inline-code: lighten($subthemecolor, 70%);
  $bgcolor-card: $lightthemecolor;
  //$bgcolor-keyword-highlighted: $grw-marker-yellow;

  $color-header: $bgcolor-theme;
  $color-global: #3c4a60;
  $color-link: rgb(74, 109, 204);
  $color-link-hover: lighten($color-link, 12%);
  $sidebar-text: $bgcolor-theme;
  $color-reversal: $gray-100;

  $primary: $bgcolor-theme;
  $info: lighten($bgcolor-theme, 20%);

  $bgcolor-blinked-section: rgba($primary, 0.2);

  // List Group colors
  $color-list: $color-global;
  $bgcolor-list: $bgcolor-global;
  $color-list-active: $color-reversal;
  $bgcolor-list-active: $primary;
  $color-list-hover: $color-reversal;

  // navbar
  $bgcolor-search-top-dropdown: $primary;

  // Logo colors
  $bgcolor-logo: transparent;
  $fillcolor-logo-mark: lighten($bgcolor-theme, 20%);

  // Icon colors
  $color-editor-icons: $color-global;

  $color-link-wiki: lighten($bgcolor-theme, 20%);
  $color-link-wiki-hover: lighten($color-link-wiki, 20%);
  $color-link-nabvar: $color-global;
  $color-link-nabvar-hover: $color-global;
  $color-inline-code: $subthemecolor;

  // border colors
  $border-color-theme: $lightthemecolor;
  $thickborder: #5584e1;
  $bordercolor-inline-code: $lightthemecolor;

  // dropdown colors
  $bgcolor-dropdown-link-active: $growi-blue;

  // admin theme box
  $color-theme-color-box: lighten($bgcolor-theme, 20%);

  // Sidebar
  $bgcolor-sidebar: $bgcolor-theme;
  $color-sidebar-context: $color-reversal;
  $bgcolor-sidebar-context: lighten($bgcolor-theme, 10%);
  // Sidebar resize button
  $color-resize-button: $color-reversal;
  $bgcolor-resize-button: #209fd8;
  $color-resize-button-hover: $color-reversal;
  $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
  // Sidebar contents
  $color-sidebar-context: $color-global;
  $bgcolor-sidebar-context: #f4f6fc;
  // Sidebar list group
  $bgcolor-sidebar-list-group: #fafbff; // optional

  @import '../../styles/theme/apply-colors';
  @import '../../styles/theme/apply-colors-light';

  //Button
  .grw-page-editor-mode-manager {
    .btn.btn-outline-primary {
      @include page-editor-mode-manager.btn-page-editor-mode-manager(darken($primary, 15%), lighten($primary, 45%), lighten($primary, 50%));
    }
  }
}