@use '@growi/core/scss/bootstrap/init' as bs;

@use '~/styles/variables' as var;

.grw-sidebar-nav :global {
  $sidebar-nav-button-height: 55px;

  %fukidashi-for-active {
    position: relative;

    // speech balloon
    &:after {
      position: absolute;
      right: -0.1em;
      display: block;
      width: 0;
      content: '';
      border: 9px solid transparent;
      border-right-color: white;
      border-left-width: 0;
      transform: translateY(-#{$sidebar-nav-button-height / 2});
    }
  }

  // set position and z-index to prevent dropdowns covered by other element
  position: relative;
  z-index: bs.$zindex-fixed;

  height: 100vh;

  .grw-logo {
    svg {
      width: var.$grw-logo-width;
      height: var.$grw-logo-width;
      padding: (var.$grw-logo-width - var.$grw-logomark-width) / 2;
    }
  }

  .grw-apperance-mode-dropdown,
  .grw-personal-dropdown {
    .dropdown-menu {
      min-width: 15rem;

      .grw-icon-container svg {
        width: 18px;
        height: 18px;
      }
    }
  }

  .btn {
    width: var.$grw-sidebar-nav-width;
    line-height: 1em;
    border: 0;
    border-radius: 0;
    box-shadow: none !important;

    // icon opacity
    &:not(.active) {
      i {
        opacity: 0.6;
      }
      &:hover,
      &:focus {
        i {
          opacity: 0.7;
        }
      }
    }
  }

  .grw-sidebar-nav-primary-container {
    .btn {
      padding: 1em;
      i {
        font-size: 2.3em;
      }

      &.active {
        @extend %fukidashi-for-active;
      }
    }
  }

  .grw-sidebar-nav-secondary-container {
    position: fixed;
    bottom: 1.5rem;

    .btn {
      padding: 0.9em;
      i {
        font-size: 1.5em;
      }
    }
  }
}


.grw-sidebar-nav :global {
  .btn-primary {
    --bs-btn-bg: transparent !important;
    --bs-btn-active-bg: transparent !important;
  }
}
@include bs.color-mode(light) {
  .grw-sidebar-nav :global {
    background-color: var(--grw-highlight-100);

    .btn-primary {
      --bs-btn-color: var(--grw-primary-500);
      --bs-btn-hover-color: var(--grw-primary-500);
      --bs-btn-hover-bg: var(--grw-highlight-300);
      --bs-btn-active-color: var(--grw-primary-500);
    }
  }
}
@include bs.color-mode(dark) {
  .grw-sidebar-nav :global {
    background-color: var(--grw-highlight-900);

    .btn-primary {
      --bs-btn-color: var(--grw-primary-400);
      --bs-btn-hover-color: var(--grw-primary-400);
      --bs-btn-hover-bg: var(--grw-highlight-700);
      --bs-btn-active-color: var(--grw-primary-400);
    }
  }
}