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

/**
 * ErrorMessage CSS
 */
export const styles = css`
  :host {
    -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));
  }

  .nile-error-message {
    width: 100%;
    font-size: var(--nile-font-size-small, var(--ng-font-size-text-xs));
    letter-spacing: 0.2px;
    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
    line-height: var(--nile-font-size-small, var(--ng-line-height-text-xs));
   
  }

  .nile-error-message__error {
    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
    word-break: break-word;
  }

  .nile-error-message__response {
    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));
    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));
    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));
    overflow-x: auto;
  }

  .nile-error-message__icon {
    vertical-align: middle;
    margin-right: var(--nile-spacing-xxs, var(--ng-spacing-xxs));
  }

  .nile-error-message__more-button {
    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
    align-items: center
  }

  .nile-error-message__response-expanded {
    line-height: var(--nile-line-height-small);
    height: auto;
    max-height: 100px;
    overflow-y: auto;
    border: 1px solid var(--nile-colors-red-500, var(--ng-colors-border-error));
    border-left: var(--nile-border-size-6, var(--ng-border-width-4)) solid var(--nile-colors-red-500, var(--ng-colors-border-error));
    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
    margin-top: var(--nile-spacing-lg, var(--ng-spacing-md));
    padding: var(--nile-spacing-lg, var(--ng-spacing-md));
    background: var(--nile-colors-neutral-100, var(--ng-colors-fg-white));
    transition: max-height 0.3s ease-in-out;
    flex-shrink: 0;
  }

  .nile-error-message__response-expanded.collapsed {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    visibility: hidden;
    padding: var(--nile-spacing-none) var(--nile-spacing-none);
  }

  .nile-error-message__response-expanded.expanded {
    max-height: var(--nile-height-48px, var(--ng-height-48px));
    transition: max-height 0.3s ease-in-out;
    visibility: visible;
    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-lg, var(--ng-spacing-lg));
    padding-right: var(--nile-spacing-lg, var(--ng-spacing-lg));
    }
`;

export default [styles];