import { css } from 'lit'

export default css`
  :host {
    display: block;
    --ui-progress-height: var(--request-timings-progress-height, 12px);
    --ui-progress-track-color: var(--md-sys-color-surface-variant);
    --ui-progress-primary-progress-color: var(--md-sys-color-surface-variant);
    --ui-progress-secondary-progress-color: var(--request-timings-progress-color, #4a4);

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

  .row {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  ui-progress {
    flex: 1;
    flex-basis: 0.000000001px;
  }

  .label,
  .date-value {
    user-select: text;
    cursor: text;
  }

  .label {
    margin-right: 8px;
  }

  .timing-label {
    width: var(--request-timings-label-width, 160px);

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

  .timing-value {
    width: var(--request-timings-value-width, 120px);
    text-align: right;
    user-select: text;
    cursor: text;
  }

  .total {
    margin-top: 12px;
    padding-top: 12px;

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

  .row.is-total {
    justify-content: flex-end;
  }

  :host([narrow]) .row {
    flex-direction: column;
    align-items: start;
    margin: 8px 0;
  }

  :host([narrow]) ui-progress {
    width: 100%;
    flex: auto;
    order: 3;
  }

  :host([narrow]) .timing-value {
    text-align: left;
    order: 2;
  }

  :host([narrow]) .timing-label {
    order: 1;
    width: auto;
  }

  .status-row,
  .timings-row {
    flex-direction: row;
    display: flex;
    align-items: center;
    min-height: 56px;
  }

  .status-row {
    flex-direction: row;
    display: flex;
    justify-content: flex-end;
  }

  .sub-title {
    font-family: var(--md-sys-typescale-title-medium-font);
    font-weight: var(--md-sys-typescale-title-medium-weight);
    font-size: var(--md-sys-typescale-title-medium-size);
    letter-spacing: var(--md-sys-typescale-title-medium-tracking);
    line-height: var(--md-sys-typescale-title-medium-height);
  }

  .status-label {
    width: 60px;
    font-size: var(--request-timings-panel-timing-total-size, 1.1rem);
    font-weight: var(--request-timings-panel-timing-total-weight, 400);
  }

  .text {
    user-select: text;
    cursor: text;
  }

  .redirect-value {
    margin-top: 12px;
    flex: 1;
    flex-basis: 0.000000001px;
  }

  :host([narrow]) .timings-row {
    flex-direction: column;
    align-items: start;
    margin: 20px 0;
  }

  :host([narrow]) .redirect-value {
    width: 100%;
    flex: auto;
  }

  :host([narrow]) .status-row {
    justify-content: flex-start;
  }

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