import { css } from 'lit';
import commonStyles from './styles/Common.js';
import schemaStyles from './styles/SchemaCommon.js';
import MarkdownStyles from '../highlight/MarkdownStyles.js';
import surface from '../../styles/m3/surface.module.js';

export default [
commonStyles, MarkdownStyles, schemaStyles, surface,
css`
:host {
  display: block;
}

.operation-header {
  margin-bottom: 32px;
}

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

.operation-title .label {
  font-family: var(--md-sys-typescale-headline-medium-font-family-name);
  font-style: var(--md-sys-typescale-headline-medium-font-family-style);
  font-weight: var(--md-sys-typescale-headline-medium-font-weight);
  font-size: var(--md-sys-typescale-headline-medium-font-size);
  letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
  line-height: var(--md-sys-typescale-headline-medium-height);
  text-transform: var(--md-sys-typescale-headline-medium-text-transform);
  text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);

  margin: 12px 0px;
  flex: 1;
}

.sub-header {
  font-family: var(--md-sys-typescale-label-large-font-family-name);
  font-style: var(--md-sys-typescale-label-large-font-family-style);
  font-weight: var(--md-sys-typescale-label-large-font-weight);
  font-size: var(--md-sys-typescale-label-large-font-size);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  line-height: var(--md-sys-typescale-label-large-height);
  text-transform: var(--md-sys-typescale-label-large-text-transform);
  text-decoration: var(--md-sys-typescale-label-large-text-decoration);
  
  margin: 0;
}

.summary {
  color: var(--operation-description-color, var(--api-method-documentation-description-color, rgba(0, 0, 0, 0.74)));
  font-size: 1.1rem;
}

.callback-section {
  margin: 12px 0;
  padding: 8px;
  background-color: var(--operation-callback-background-color, var(--api-method-documentation-callback-background-color, #f7f7f7));
}

.extensions {
  font-style: italic;
  margin: 12px 0;
}
`];
