import { css } from 'lit'

export default css`
  :host {
    display: block;
    max-width: 900px;
  }

  ui-filled-text-field {
    margin: 0;
    width: 100%;
  }

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

    display: flex;
    align-items: center;
    margin-bottom: 20px;
    height: 48px;
  }

  .form-item,
  .encapsulate-item {
    margin-bottom: 20px;
  }

  .encapsulate-item {
    display: flex;
    align-items: center;
  }

  .encapsulate-item label {
    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);
  }

  .empty-info,
  .help-banner {
    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);
  }

  .auth-info {
    font-family: var(--md-sys-typescale-body-small-font);
    font-weight: var(--md-sys-typescale-body-small-weight);
    font-size: var(--md-sys-typescale-body-small-size);
    letter-spacing: var(--md-sys-typescale-body-small-tracking);
    line-height: var(--md-sys-typescale-body-small-height);
  }

  ui-switch {
    margin-right: 12px;
  }

  ui-divider {
    margin: 40px 0;
  }
`
