/**
* Copyright Aquera Inc 2023
*
* This source code is licensed under the BSD-3-Clause license found in the
* LICENSE file in the root directory of this source tree.
*/

import {css} from 'lit';

/**
 * SideBarGroupItem CSS
 */
export const styles = css`
  :host {
    display: block;
  }

  .group-item {
    display: flex;
    flex-direction: column;
    height: var(--nile-height-38px, var(--ng-spacing-40px));
    width: var(--nile-width-208px, var(--ng-spacing-264));
    overflow: hidden;
  }

  .item-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
    padding-top: var(--nile-spacing-lg, var(--ng-spacing-md));
    padding-bottom: var(--nile-spacing-lg, var(--ng-spacing-md));
    padding-left: var(--nile-spacing-md, var(--ng-spacing-lg));
    padding-right: var(--nile-spacing-md, var(--ng-spacing-lg));
    cursor: pointer;
    color: var(--nile-colors-dark-900, var(--ng-colors-graylightmode-900));
    text-decoration: none;
    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
    line-height: 1.4;
    box-sizing: border-box;
    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));
  }

  .item-link:hover {
    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary-hover));
    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
  }

  ::slotted(nile-side-bar-group-item-icon) {
    flex-shrink: 0;
  }

  ::slotted(nile-side-bar-group-item-text) {
    flex-grow: 1;
  }

  :host([active]) [part="link"] {
    background: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));
    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
  }

  :host([collapsed]) .group-item {
    height: 38px;
    width: 38px;
  }

  :host([disabled]) .item-link {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
  }
`;

export default [styles];