weseek__growi/apps/app/src/components/Sidebar/SidebarHead/ToggleCollapseButton.module.scss

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

@use '../button-styles';
@use '../variables' as var;

.btn-toggle-collapse :global {
  @extend %btn-primary-basis;

  $height: var.$grw-sidebar-nav-width; // declare $height with the same value as the sidebar nav width
  height: $height;
}

// icon
.btn-toggle-collapse :global {
  .material-symbols-outlined {
    transition: transform 0.25s;

    // rotation
    &.rotate180 {
      transform: rotate(180deg);
    }
  }
}

// == Colors
.btn-toggle-collapse {
  &:global {
    &.btn.btn-primary {
      @extend %btn-primary-color-vars;
    }
  }
}
@include bs.color-mode(light) {
  .btn-toggle-collapse {
    &:global {
      &.btn.btn-primary {
        --bs-btn-color: var(--grw-sidebar-nav-btn-color, var(--bs-gray-500));
        --bs-btn-hover-bg: var(--grw-sidebar-nav-btn-hover-bg, var(--grw-highlight-300));
      }
    }
  }
}
@include bs.color-mode(dark) {
  .btn-toggle-collapse {
    &:global {
      &.btn.btn-primary {
        --bs-btn-color: var(--grw-sidebar-nav-btn-color, var(--bs-gray-600));
        --bs-btn-hover-bg: var(--grw-sidebar-nav-btn-hover-bg, var(--grw-highlight-700));
      }
    }
  }
}