.html-preview {
  padding: 1rem;
  background-color: var(--gray-100);
  display: flex;
  align-items: center;

  & iframe {
    background-color: white;
    border-radius: 1rem;
    border: none;
    width: 100%;
  }

  & iframe.mobile {
    width: 390px;
  }

  & .devices {
    display: inline-flex;
    flex: 0;

    gap: 1rem;
    margin-bottom: 1rem;

    & a {
      background-color: white;
      border-radius: 0.25rem;
      padding: 0.5rem;

      &:hover {
        background-color: var(--gray-50);
      }
    }
  }
}

.html-preview.sms-preview {
  background-color: white;
  & p {
    background-color: var(--imessage-gray);
    border-radius: 1rem;
    font-size: small;
    padding: 0.25rem 0.75rem;
    margin: 1rem auto;
    max-width: 300px;
    word-wrap: break-word;
  }
}