@use '@growi/core-styles/scss/bootstrap/init' as bs;
@use '../button-styles';


.grw-secondary-items :global {
  .btn {
    @extend %btn-basis;

    opacity: 0.6;

    &:hover,
    &:focus {
      opacity: 0.8;
    }
  }
}

// == Colors
.grw-secondary-items :global {
  .btn.btn-primary {
    @extend %btn-primary-color-vars;
  }
}

@include bs.color-mode(light) {
  .grw-secondary-items :global {
    .btn-primary {
      --bs-btn-color: var(--grw-sidebar-nav-btn-color, var(--grw-primary-600));
      --bs-btn-hover-bg: var(--grw-sidebar-nav-btn-hover-bg, var(--grw-highlight-300));
    }
  }
}

@include bs.color-mode(dark) {
  .grw-secondary-items :global {
    .btn-primary {
      --bs-btn-color: var(--grw-sidebar-nav-btn-color, var(--grw-primary-500));
      --bs-btn-hover-bg: var(--grw-sidebar-nav-btn-hover-bg, var(--grw-highlight-700));
    }
  }
}