import { css } from 'lit'

export default css`
  :host {
    display: contents;
  }

  dialog {
    overflow: hidden;
    /* Do not override the display value here. It will render the dialog even when hidden */

    border: none;
    border-radius: var(--md-sys-shape-corner-extra-large);
    background-color: var(--md-sys-color-surface);
    box-shadow: var(--md-sys-elevation-3);
    color: var(--md-sys-color-on-surface-variant);
    padding: 24px;

    max-width: var(--ui-dialog-max-width, revert);
    max-height: var(--ui-dialog-max-height, revert);
    width: var(--ui-dialog-width, revert);
    height: var(--ui-dialog-height, revert);
  }

  dialog::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: var(--md-sys-color-surface-tint);
    opacity: 0.11;
    pointer-events: none;
  }

  dialog:open {
    animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-dialog;
  }

  dialog:open::backdrop {
    animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-backdrop;
  }

  .container {
    display: flex;
    flex-direction: column;
  }

  .icon {
    display: none;
  }

  .icon.with-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
  }

  .icon ::slotted(*) {
    color: var(--md-sys-color-secondary);
    fill: var(--md-sys-color-secondary);
    width: 24px;
    height: 24px;
  }

  .title {
    display: none;
    color: var(--md-sys-color-on-surface);
    font-family: var(--md-sys-typescale-headline-small-font);
    font-weight: var(--md-sys-typescale-headline-small-weight);
    font-size: var(--md-sys-typescale-headline-small-size);
    letter-spacing: var(--md-sys-typescale-headline-small-tracking);
    line-height: var(--md-sys-typescale-headline-small-height);
    margin: 0;
    padding: 0;
    text-align: center;
  }

  .title.with-title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
  }

  .content {
    overflow: auto;
    font-family: var(--md-sys-typescale-body-medium-font);
    font-weight: var(--md-sys-typescale-body-medium-weight);
    font-size: var(--md-sys-typescale-body-medium-size);
    letter-spacing: var(--md-sys-typescale-body-medium-tracking);
    line-height: var(--md-sys-typescale-body-medium-height);
  }

  .buttons {
    display: none;
    display: flex;
    align-items: center;
    justify-content: end;
  }

  .buttons.with-buttons {
    margin-top: 24px;
  }

  .buttons ::slotted(:not(:last-child)) {
    margin-right: 12px;
  }

  @keyframes show-dialog {
    from {
      transform: translateY(-110%) scaleY(0);
    }
    to {
      transform: translateY(0%) scaleY(1);
    }
  }

  @keyframes show-backdrop {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
`
