import { css } from 'lit'

export default css`
  :host {
    display: block;
  }

  .form-item {
    margin: 20px 0;
  }

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

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

  .value-preview {
    margin-top: 4px;
    padding: 8px 12px;
    background-color: var(--md-sys-color-surface);
    position: relative;

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

  .value-preview::before {
    content: '';
    background-color: var(--md-sys-color-primary);
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -1;
  }

  .header {
    display: flex;
    align-items: center;
  }

  .section-title {
    flex: 1;
    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);
  }
`
