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

/**
 * EmptyState CSS
 */
export const styles = css`
  :host {
    display:inline-flex;
    width: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));
  }

  .empty-state--sm {
    --nile-es-text-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
    --nile-es-text-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));
    --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
    --nile-es-subtext-line-height:20px;
    
    --nile-es-icon-size:var(--nile-height-48px, var(--ng-height-48px));
    --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));
    --nile-es-img-height:118px;
    --nile-es-img-width:152px;

    --nile-es-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));
    --nile-es-body-gap:var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));
    --nile-es-text-gap:var(--nile-spacing-none, var(--ng-spacing-xs));
  }

  .empty-state--md {
    --nile-es-text-size: var(--nile-type-scale-5, var(--ng-font-size-text-lg));
    --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-lg));
    --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
    --nile-es-subtext-line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));

    --nile-es-icon-size: var(--nile-spacing-5-x, var(--ng-height-48px));
    --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));
    --nile-es-img-height:128px;
    --nile-es-img-width:172px;

    --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));
    --nile-es-body-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-2xl));
    --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));
  }

  .empty-state--lg {
    --nile-es-text-size: var(--nile-spacing-2xl, var(--ng-font-size-text-xl));
    --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-xl));
    --nile-es-subtext-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
    --nile-es-subtext-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));

    --nile-es-icon-size:var(--nile-height-60px, var(--ng-height-60px));
    --nile-es-flat-option-border-radius: var(--nile-border-size-10, var(--ng-radius-lg));
    --nile-es-img-height:160px;
    --nile-es-img-width:220px;

    --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));
    --nile-es-body-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-2xl));
    --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));
  }

  .empty-state {
    min-width:300px;
    max-width:512px;
    width:100%;
    margin-inline: auto;
    height:max-content;
    display:flex;
    flex-direction:column;
    row-gap:var(--nile-es-gap);
  }
  .empty-state--tone-info .empty-state__body--tonal {
    background: linear-gradient(
      180deg,
      var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary)) 0%,
      var(--nile-colors-primary-400, var(--ng-colors-bg-brand-secondary)) 100%
    );
  }

  .empty-state--tone-warning .empty-state__body--tonal {
    background: linear-gradient(
      180deg,
      var(--nile-colors-yellow-100, var(--ng-colors-bg-warning-primary)) 0%,
      var(--nile-colors-yellow-400, var(--ng-colors-bg-warning-secondary)) 100%
    );
  }

  .empty-state--tone-error .empty-state__body--tonal {
    background: linear-gradient(
      180deg,
      var(--nile-colors-red-100, var(--ng-colors-bg-error-primary)) 0%,
      var(--nile-colors-red-400, var(--ng-colors-bg-error-secondary)) 100%
    );
  }

  .empty-state--tone-info .nile-flat-type-icon {
    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));
    border-color: var(--nile-colors-primary-600, var(--ng-colors-border-brand));
  }

  .empty-state--tone-warning .nile-flat-type-icon {
    background-color: var(--nile-colors-yellow-100, var(--ng-colors-bg-warning-primary));
    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));
  }

  .empty-state--tone-error .nile-flat-type-icon {
    background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-primary));
    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));
  }

  .empty-state--inline {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    min-width: 0;
    max-width: none;
    column-gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
    row-gap: var(--nile-spacing-spacing-xs, var(--ng-spacing-xs));
    padding: var(--nile-spacing-spacing-xl, var(--ng-spacing-xl))
             var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
  }

  .empty-state--inline .empty-state__body {
    flex-direction: row;
    align-items: center;
    column-gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
  }

  .empty-state--inline .empty__state__text-section {
    flex-direction: row;
    align-items: baseline;
    gap: var(--nile-spacing-spacing-sm, var(--ng-spacing-sm));
    max-width: none;
  }

  .empty-state--inline .empty-state__text,
  .empty-state--inline .empty-state__subtext {
    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));
    text-align: left;
  }
  .empty-state__body--inline {
    display: grid;
    place-items: center;
  }


  .empty-state--page .empty-state__text {
    font-size: var(--nile-type-scale-9, var(--ng-font-size-display-sm));
    line-height: var(--nile-line-height-display, var(--ng-line-height-display-sm));
    letter-spacing: -0.02em;
  }

  .empty-state--page .empty-state__subtext {
    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
    line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));
  }

  .empty-state--page .empty-state__code {
    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
    letter-spacing: 0.2em;
  }
  /* stack and page carry no padding of their own, so the dashed edge would sit
     flush against the content — hence the roomy padding here. */
  .empty-state--bordered {
    border: 1px dashed var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
    border-radius: var(--nile-border-size-10, var(--ng-radius-xl));
    background: var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary));
    padding: var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl))
             var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));
  }

  /* A strip stays tight when it is bordered too. Spelled out as its own
     two-class rule so specificity decides, not declaration order. */
  .empty-state--inline.empty-state--bordered {
    padding: var(--nile-spacing-spacing-xl, var(--ng-spacing-xl))
             var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
  }

  .empty-state__body {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
    row-gap:var(--nile-es-body-gap)
  }

  .empty-state__body--content {
    position:relative;
  }

  .empty-state__img__icon {
    display: var(--nile-display-flex, var(--ng-display-flex));
    justify-content: center;
    align-items: center;
  }

  .empty-state__body--tonal {
    background: var(--nile-gradient-1, var(--ng-white-gradient-6));
    width: 104px;
    height: 104px;
    border-radius: var(--nile-radius-full, var(--ng-radius-full));
    display:flex;
    justify-content:center;
    align-items:center;
  }

  .nile-flat-type-icon {
    height:var(--nile-es-icon-size);
    aspect-ratio:1 / 1;
    border-radius: var(--nile-es-flat-option-border-radius);
    background-color: var(--nile-colors-neutral-0, var(--ng-colors-bg-primary));
    display: grid;
    place-items: center;
    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
  }

  .empty__state__text-section {
    display:flex;
    flex-direction:column;
    gap:var(--nile-es-text-gap);
    max-width:80%;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .empty-state__text {
    font-size: var(--nile-es-text-size);
    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));
    line-height: var(--nile-es-text-line-height);
    text-align: center;
    font-style: normal;
  }

  .empty-state__subtext {
    font-size: var(--nile-es-subtext-size);
    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
    line-height: var(--nile-es-subtext-line-height);
    text-align: center;
    color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
    font-style: normal;
  }

  .empty-state-actions {
    display:flex;
    justify-content:center;
    gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
    flex-wrap: wrap;
  }

  .empty-state__code {
    font-family: var(--nile-font-family-body, var(--ng-font-family-body));
    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    color: var(--nile-colors-dark-400, var(--ng-colors-text-quaternary-500));
  }

`;

export default [styles];