/**
* 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%;
    height:max-content;
    display:flex;
    flex-direction:column;
    row-gap:var(--nile-es-gap);
  }

  .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(--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: white;
    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%;
  }

  .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;
  }
`;

export default [styles];