import { css } from 'lit'

export default css`
  :host {
    display: inline-flex;
    align-items: flex-start;
    border-radius: var(--md-sys-shape-corner-medium, 12px);
    border: 1px solid var(--md-sys-color-outline-variant);

    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
  }

  .entity-card {
    display: flex;
    flex-direction: column;
    flex: 1 0 0;

    .entity {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      align-self: stretch;

      .header {
        display: flex;
        padding: 16px;
        align-items: center;
        gap: 16px;
        align-self: stretch;

        .headline {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          flex: 1 0 0;

          .path {
            color: var(--md-sys-color-on-surface-variant);
          }
        }
      }

      .actions-section {
        display: flex;
        padding: 0 16px 16px 16px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;

        .actions {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 8px;
          flex: 1 0 0;
        }

        .chip-list {
          display: flex;
          align-items: flex-start;
          align-content: flex-start;
          gap: 16px;
          align-self: stretch;
        }
      }
    }

    .footer {
      display: flex;
      padding: 0 16px 8px 16px;
      align-items: center;
      gap: 16px;
      align-self: stretch;

      .action-buttons {
        display: flex;
        align-items: center;
        flex: 1 0 0;
      }
    }
  }
`
