import { css } from 'lit';

/**
 * SideBarGroup CSS
 */
export const styles = css`
  :host {
    display: flex;
    flex-direction: column;
    padding-bottom: var(--nile-spacing-xs, var(--ng-spacing-xs));
    padding-left: var(--nile-spacing-xl, var(--ng-spacing-xl));
    padding-right: var(--nile-spacing-xl, var(--ng-spacing-xl));
  }


  :host([footer]) {
    margin-top: auto;
    margin-bottom: var(--nile-spacing-md);
  }

  .group-label {
    font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-semibold));
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--nile-spacing-xs, var(--ng-spacing-xs));
  }
  :host([divider])::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
 margin-left: var(--nile-spacing-md, var(--ng-spacing-md));
 margin-right: var(--nile-spacing-md, var(--ng-spacing-md));
}
 
.side-bar-group {
  display: flex;
  flex-direction: column;
  gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
}


:host ::slotted(nile-side-bar-group-item:first-child) {
  margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));
}

:host([collapsed]) .side-bar-group {
align-items: center;
justify-content: center;
}
`;

export default [styles];