joomla-field-media {
  --hiq-field-media-background-color: var(--hiq-disabled-background-color);
  --hiq-field-media-border-color: var(--hiq-disabled-border-color);
  --hiq-field-media-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='rgba(0,0,0,.25)' d='M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 336H54a6 6 0 0 1-6-6V118a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v276a6 6 0 0 1-6 6zM128 152c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zM96 352h320v-80l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L192 304l-39.515-39.515c-4.686-4.686-12.284-4.686-16.971 0L96 304v48z'/%3E%3C/svg%3E");

  .is-dark & {
    --hiq-field-media-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='hsl(220, 10%, 90%)' d='M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 336H54a6 6 0 0 1-6-6V118a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v276a6 6 0 0 1-6 6zM128 152c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zM96 352h320v-80l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L192 304l-39.515-39.515c-4.686-4.686-12.284-4.686-16.971 0L96 304v48z'/%3E%3C/svg%3E");
  }

  .field-media-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 356px;
    height: 180px;
    padding: 10px;
    overflow: hidden;
    background-color: var(--hiq-field-media-background-color);
    border: 1px solid var(--hiq-field-media-border-color);
    border-width: 1px 1px 0;
    border-radius: var(--hiq-border-radius) var(--hiq-border-radius) 0 0;
  }

  .field-media-preview-icon {
    width: 7rem;
    height: 7rem;
    background-image: var(--hiq-field-media-icon);
    background-size: 7rem;
  }

  .field-media-input {
    border-start-start-radius: 0;
  }

  .button-clear {
    border-end-start-radius: 0;
  }

  img {
    max-width: 100%;
    max-height: 100%;
  }
}
