import { css } from 'lit';
import componentStyles from '../../styles/component.styles.mjs';

const styles = css`
  ${componentStyles}

  :host {
    display: contents;

    /* For better DX, we'll reset the margin here so the base part can inherit it */
    margin: 0;
  }

  .alert {
    position: relative;
    display: flex;
    align-items: stretch;
    background-color: var(--flow-ui-alert-background-color);
    border: solid var(--flow-ui-alert-border-width) var(--flow-ui-alert-border-color);
    border-top-width: calc(var(--flow-ui-alert-border-width) * 3);
    border-radius: var(--flow-ui-border-radius-medium);
    font-family: var(--flow-ui-font-sans);
    font-size: var(--flow-ui-font-size-medium);
    font-weight: var(--flow-ui-font-weight-normal);
    line-height: 1.6;
    color: var(--flow-ui-alert-color);
    margin: inherit;
  }

  .alert:not(.alert--has-icon) .alert__icon,
  .alert:not(.alert--closable) .alert__close-button {
    display: none;
  }

  .alert__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    font-size: var(--flow-ui-font-size-large);
    padding-inline-start: var(--flow-ui-spacing-large);
  }

  .alert--primary {
    border-top-color: var(--flow-ui-color-primary-500);
  }

  .alert--primary .alert__icon {
    color: var(--flow-ui-color-primary-500);
  }

  .alert--secondary {
    border-top-color: var(--flow-ui-color-secondary-500);
  }

  .alert--secondary .alert__icon {
    color: var(--flow-ui-color-secondary-500);
  }

  .alert--success {
    border-top-color: var(--flow-ui-color-success-600);
  }

  .alert--success .alert__icon {
    color: var(--flow-ui-color-success-600);
  }

  .alert--neutral {
    border-top-color: var(--flow-ui-color-neutral-600);
  }

  .alert--neutral .alert__icon {
    color: var(--flow-ui-color-neutral-600);
  }

  .alert--warning {
    border-top-color: var(--flow-ui-color-warning-600);
  }

  .alert--warning .alert__icon {
    color: var(--flow-ui-color-warning-600);
  }

  .alert--danger {
    border-top-color: var(--flow-ui-color-danger-600);
  }

  .alert--danger .alert__icon {
    color: var(--flow-ui-color-danger-600);
  }

  .alert__message {
    flex: 1 1 auto;
    display: block;
    padding: var(--flow-ui-spacing-large);
    overflow: hidden;
  }

  .alert__close-button {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    font-size: var(--flow-ui-font-size-medium);
    padding-inline-end: var(--flow-ui-spacing-medium);
  }
`;

export { styles as default };
