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

/**
 * SectionMessage CSS
 */
export const styles = css`
  :host {
    display: block;
    width: 100%;
    box-sizing: border-box;
    --icon-button-background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-primary-alt));
    min-width: var(--nile-width-width-xxs, var(--ng-width-80));
    -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));
  }

  .parent__wrapper {
    width: auto;
    display: flex;
    gap: var(--nile-spacing-lg, var(--ng-spacing-xl));
    box-sizing: border-box;
    padding: var(--nile-type-scale-4, var(--ng-spacing-xl));
    word-wrap: break-word;
    align-items: center;
    border: var(--nile-border-width-0, var(--ng-border-width-1)) solid var(--nile-section-message-background-color-primary, var(--ng-colors-border-secondary-alt));
    border-radius: var(--nile-spacing-xs, var(--ng-radius-xl));
    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-lg));
  }

  .section--primary {
    background-color: var(--nile-section-message-background-color-primary, var(--ng-colors-bg-primary-alt));
  }

  .section--success {
    background-color: var(--nile-section-message-background-color-success, var(--ng-colors-bg-primary-alt));
  }

  .section--warning {
    background-color: var(--nile-section-message-background-color-warning, var(--ng-colors-bg-primary-alt));
  }

  .section--error {
    background-color: var(--nile-section-message-background-color-error, var(--ng-colors-bg-primary-alt));
  }

  .left__wrapper {
    align-self: start;
    height: auto;
  }

  nile-icon-button::part(base) {
    background-color: var(--icon-button-background-color, var(--ng-colors-bg-primary-alt));
    color: var(--nile-colors-dark-900, var(--ng-colors-text-brand-secondary-700));
  }

  .icon--primary {
    --icon-button-background-color: var(
      --nile-section-message-icon-background-color-primary,
    var(--ng-colors-bg-primary-alt));
  }

  .icon--success {
    --icon-button-background-color: var(
      --nile-section-message-icon-background-color-success
    );
  }

  .icon--warning {
    --icon-button-background-color: var(
      --nile-section-message-icon-background-color-warning
    );
  }

  .icon--error {
    --icon-button-background-color: var(
      --nile-section-message-icon-background-color-error
    );
  }

  .right__wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
    color: var(--nile-colors-dark-900, var(--ng-colors-fg-primary-900));
    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
    font-style: normal;
    line-height: 140%;
    letter-spacing: 0.2px;
  }

  .section__heading {
    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
  }

  .section__description {
    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
    color: var(--nile-colors-dark-900, var(--ng-colors-fg-secondary-700));
  }

  .footer__actions {
    display: flex;
    gap: var(--nile-spacing-md, var(--ng-spacing-none));
    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));
    cursor: pointer;
  }

  ::slotted([slot='footer__actions']:not(:last-child)) {
    color: var(--nile-colors-primary-600, var(--ng-colors-text-tertiary-600));
  }

  ::slotted([slot='footer__actions']:not(:last-child))::after {
    content: '•';
    color: var(--nile-section-message-footer-color, var(--ng-componentcolors-alpha-white-100));
    margin-left: var(--nile-spacing-md, var(--ng-spacing-md));
  }
`;

export default [styles];