import { css } from 'lit'
import { StatusStyles } from './HttpStatus.js'
import typography from '../../styles/m3/typography.module.js'
import colors from '../../styles/m3/colors.module.js'
import badge from '../../styles/m3/badge.module.js'

export default [
  StatusStyles,
  typography,
  colors,
  badge,
  css`
    :host {
      display: block;
      overflow: auto;
      height: 100%;

      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);
    }

    .headers {
      user-select: text;
    }

    .status-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      min-height: 56px;
      padding: 20px 0;
      overflow: auto;
      user-select: text;
    }

    .status-label {
      width: 40px;
      margin-right: 24px;
    }

    .redirect-value {
      flex: 1;
      overflow: hidden;
    }

    .redirect-value log-body {
      overflow: auto;
    }

    .header-name {
      font-weight: 600;
    }

    .no-data {
      text-align: left;
      margin: 20px;

      font-family: var(--md-sys-typescale-body-large-font);
      font-weight: var(--md-sys-typescale-body-large-weight);
      font-size: var(--md-sys-typescale-body-large-size);
      letter-spacing: var(--md-sys-typescale-body-large-tracking);
      line-height: var(--md-sys-typescale-body-large-height);
    }

    ui-tabs {
      margin-bottom: 12px;
    }

    #assertions ui-divider {
      --ui-divider-padding: 40px;
    }

    .assertion {
      display: flex;
      align-items: center;
      min-height: 52px;
    }

    .assertion-icon {
      margin-right: 20px;
    }

    .fail-details {
      display: flex;
      flex-direction: column;
    }

    .fail-details .error-text {
      margin-top: 8px;
    }

    .badge.tab {
      margin-left: 8px;
    }
  `,
]
