import { css } from 'lit';

export const styles = css`
  :host {
    display: block;
    width: 100%;
  }

  .footer-item {
    display: flex;
    align-items: center;
	  justify-content: flex-start;
    padding-top: var(--nile-spacing-md, var(--ng-spacing-md));
    padding-bottom: var(--nile-spacing-md, var(--ng-spacing-md));
    padding-left: var(--nile-spacing-lg, var(--ng-spacing-lg));
    padding-right: var(--nile-spacing-lg, var(--ng-spacing-lg));
    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;
    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
    border-radius: var(--nile-radius-sm, var(--ng-radius-lg));
    transition: background 0.2s ease;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    line-height: 0;
  }

  .footer-item:hover {
    background: var(
      --nile-side-bar-footer-hover-bg,
      var(--ng-colors-bg-primary-hover)
    );
  }

  /* left: icon */
  ::slotted([slot='icon']) {
    flex-shrink: 0;
    font-size: 1.25rem;
    margin-right: 0.5rem;
  }

  /* middle: text */
  ::slotted([slot='text']) {
    flex-grow: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* right: action */
  ::slotted([slot='action']) {
    flex-shrink: 0;
    font-size: 1.25rem;
    color: var(
      --nile-side-bar-footer-icon-color,
      var(--ng-colors-fg-quaternary-400)
    );
    margin-left: auto;
  }

 
  :host([type='support']) .footer-item {
    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-secondary));
    height: var(--nile-height-38px, var(--ng-spacing-5xl));
    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));

  }
 
  :host(:hover[type='support']) .footer-item {
  background: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));
  height: var(--nile-height-38px, var(--ng-spacing-5xl));
  }

 :host([type='avatar']) .footer-item {
border: 1px solid var(--ng-colors-border-secondary);
min-height: var(--nile-radius-4xl, var(--ng-spacing-7xl));
}
:host([type='avatar'][active]) .footer-item {
background: var(--nile-colors-neutral-400, var(--ng-colors-bg-active));
}



:host([collapsed][type='avatar']) .footer-item {
border: none;
}
  :host([collapsed][type='avatar']) .footer-item {
  padding: 4px;
 
}
:host([collapsed]) .footer-item{
  height: 38px;
  width: 38px;
}
`;

export default [styles];