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

/**
 * Card CSS
 */
export const styles = css`
  :host {
    box-sizing: border-box;
    -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 *,
  :host *::before,
  :host *::after {
    box-sizing: inherit;
  }

  [hidden] {
    display: none !important;
  }

  :host {
    --border-color: var(--nile-card-color-border, var(--ng-colors-border-secondary));
    --border-radius: var(--nile-radius-radius-xl, var(--ng-radius-xl));
    --padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
    display: inline-block;
  }

  .card {
    display: flex;
    flex-direction: column;
    justify-items: stretch;
    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
    outline: solid var(--nile-outline-0-5px) var(--border-color);
    border: solid  var(--ng-outline-1px) var(--border-color);
    border-radius: var(--border-radius);
    min-width: 273px;
    max-width: 350px;
    overflow: hidden;
    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));
  }

  .body__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
    padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-xl));
  }

  .body__wrapper_nf {
    padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));
  }
  .card__header {
    display: block;
  }

  .card__body {
    display: block;
  }

  .card__footer {
    margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));
    display: block;
    box-sizing: border-box;
    align-content: center;
    align-items: center;
    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));
    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
    border-top: var(--nile-border-style-none, 1px solid var(--ng-colors-border-secondary));
    height: 40px;
  }

 
.card:active {
  border: var(--ng-border-width-2) var(--ng-border-style-solid) var(--ng-colors-border-brand);
  background: var(--ng-colors-bg-brand-primary);
  box-shadow: var(--ng-shadow-xs);
}  

 
.card:active .card__footer {
  background: var(--ng-colors-bg-brand-primary);
  box-shadow: var(--ng-shadow-xs);
}


.card:not(.card--has-footer) .card__footer {
    display: none;
  }

.card--active {
  border: var(--ng-border-width-2) var(--ng-border-style-solid) var(--ng-colors-border-brand);
  background: var(--ng-colors-bg-brand-primary);
  box-shadow: var(--ng-shadow-xs);
}

.card--active .card__footer {
  background: var(--ng-colors-bg-brand-primary);
  box-shadow: var(--ng-shadow-xs);
}

 
.card:not(.card--active):not(:active):hover {
  box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-sm));
  outline: solid 1px var(--border-color);
  background-color: var(--ng-colors-bg-primary-hover);
}

.card:not(.card--active):not(:active):hover .card__footer {
  background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));
  box-shadow: var(--ng-shadow-sm);
}

 
.card--disabled {
  pointer-events: none;
  opacity: 0.5;
}

.card--disabled .card__footer {
  pointer-events: none;
}

`;

export default [styles];