import { css } from 'lit'

export default css`
  :host {
    --nav-width-expanded: 360px;
    --nav-width-collapsed: 48px;

    display: flex;
    flex-direction: column;
    align-self: stretch;
    box-sizing: border-box;
    padding: 0 12px;
    border-radius: var(--md-sys-shape-corner-large);
    background-color: var(--md-sys-color-surface-container-low);
    width: var(--nav-width-expanded);
    transition: width 0.2s ease-in-out;
  }

  :host([collapsed]) {
    width: var(--nav-width-collapsed);
    padding: 0 4px;
  }
`
