/**
 * 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';

/**
 * ListItem CSS
 */
export const styles = css`
  :host {
    display: flex;
    padding: 
      var(--nile-spacing-lg, var(--ng-spacing-lg)) 
      var(--nile-spacing-xl, var(--ng-spacing-xl));
    flex-direction: row;
    align-items: flex-start;
    justify-content: start;
    position: relative;
    height: 100%;
    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
  }

  :host(:hover) {
    background-color: var(--nile-colors-neutral-400, var( --ng-colors-bg-brand-primary)); /* Change background color on hover */
  }

  .preffix__icon {
    display: inline-block;
    margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));
  }

  .list__item {
    cursor: pointer;
    height: 100%;
    display: block;
    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
  }

  .content__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--nile-spacing-3px, var(--ng-spacing-xs));
    height: 100%;
    box-sizing: border-box;
  }

  .heading {
    display: inline-block;
    font-size: var(--nile-type-scale-5, var(--ng-font-size-text-lg));
    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));
  }

  .subheading {
    display: inline-block;
    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
    font-weight: var(--nile-font-weight-regular,  var(--ng-font-weight-regular));
  }

  .list-item__suffix {
    display: inline-block;
    position: absolute;
    right: 16px;
    cursor: pointer;
  }
`;

export default [styles];