import { css } from 'lit'
import typography from '../../styles/m3/typography.module.js'

export default [
  typography,
  css`
    :host {
      display: block;
    }

    .form {
      position: relative;
    }

    .working {
      position: absolute;
      top: 1px;
      width: 100%;
    }

    .view-toggle {
      margin-bottom: 20px;
      padding-top: 20px;
    }

    .form-input {
      margin: 12px 0;
    }

    .cert-file {
      margin: 20px 0;
      padding: 8px 4px;
      border: 1px transparent solid;
    }

    .cert-file.dragover {
      background-color: var(--md-sys-color-surface);
      border-color: var(--md-sys-color-outline-variant);
      border-radius: 8px;
    }

    .missing,
    .cert-info {
      display: inline-flex;
      margin-left: 12px;
      vertical-align: middle;
    }

    .missing-icon {
      fill: var(--md-sys-color-error);
      width: 16px;
      height: 16px;
      margin-right: 8px;
    }

    ui-filled-text-field {
      min-width: 320px;
    }

    .form-action {
      margin-top: 20px;
    }
  `,
]
