import { css } from 'lit';

/**
 * SideBarFooter CSS
 */
export const styles = css`
 :host {
  display: block;
  bottom: var(--nile-spacing-md);
 padding-bottom: var(--nile-spacing-xl, var(--ng-spacing-3xl));
	padding-left: var(--nile-spacing-xl, var(--ng-spacing-xl));
	padding-right: var(--nile-spacing-xl, var(--ng-spacing-xl));
  padding-top: var(--nile-spacing-xs, var(--ng-spacing-xs));
 gap: var(--nile-spacing-md, var(--ng-spacing-xl));
  bottom: 0;
  background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
}

/* Opt-in: drop the surface color so the footer sits on whatever is behind it. */
:host([background='transparent']) {
  background: transparent;
}

.footer {
  display: flex;
  flex-direction: column;    
  align-items: stretch;     
  gap: var(--nile-spacing-md, var(--ng-spacing-lg)); 
}

::slotted(nile-side-bar-footer-item) {
  display: flex;
  align-items: center;
  gap: var(--nile-spacing-md, var(--ng-spacing-xs));
  justify-content: center;
 
  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
  color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
  cursor: pointer;
  border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
  transition: background 0.2s ease;
}




 
`;

export default [styles];