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

export default [
  typography,
  css`
    :host {
      display: flex;
      flex-direction: column;
      min-height: 300px;
      position: relative;
    }

    http-body-text-editor {
      height: 100%;
    }

    .binary-hidden {
      display: none !important;
    }

    .actions {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
    }

    .actions > *:not(:last-child) {
      margin-right: 20px;
    }

    .invalid-mime {
      display: flex;
      align-items: center;
      background-color: #ffeb3b;
      color: #000;
      padding: 0 8px;
      border-radius: var(--md-sys-shape-corner-small);
      margin-bottom: 20px;
    }

    .invalid-mime .warning-icon {
      color: #ff5722;
      margin-right: 12px;
    }

    .invalid-mime .fix {
      background-color: white;
      margin-left: 12px;
      height: 36px;
    }

    .type-dropdown {
      position: relative;
      z-index: 4;
    }

    .form-info {
      margin: 20px 0 0 0;
      color: var(--md-sys-color-on-surface);
    }

    .file-picker {
      display: flex;
      align-items: center;
    }

    .file-info {
      display: flex;
      align-items: center;
      margin-left: 8px;
    }
  `,
]
