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

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

    i {
      opacity: 0.7;

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

// Add indicator
.grw-primary-items :global {
  $btn-height: sidebarVar.$grw-sidebar-button-height;
  $btn-active-indicator-height: 34px;

  .btn {
    &.active {
      position: relative;

      // indicator
      &::after {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 3px;
        height: $btn-active-indicator-height;
        content: '';
        background-color: var(--bs-primary);
        transform: translateY(#{($btn-height - $btn-active-indicator-height) / 2});
      }
    }
  }

  .badge :global {
    left: 26px;
    font-size: 8px;
  }
}

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

@include bs.color-mode(light) {
  .grw-primary-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-primary-items :global {
    .btn-primary {
      --bs-btn-color: var(--grw-sidebar-nav-btn-color, var(--grw-primary-300));
      --bs-btn-hover-bg: var(--grw-sidebar-nav-btn-hover-bg, var(--grw-highlight-700));
    }
  }
}