@import "tailwindcss/theme";
@import "../variables/theme.css";

.editor {
  padding-bottom: var(--spacing-sm-md);

  @variant md {
    padding-bottom: var(--spacing-md-md);
  }

  @variant lg {
    padding-bottom: var(--spacing-lg-md);
  }

  *:not(br) + *:not(br, li) {
    margin-top: 1lh;
  }

  h2 {
    font: var(--h2-medium);

    + * {
      margin-top: var(--spacing-sm-xs);

      @variant md {
        margin-top: var(--spacing-md-xs);
      }

      @variant lg {
        margin-top: var(--spacing-lg-xs);
      }
    }

    ~ h2,
    ~ h3,
    ~ h4 {
      margin-top: var(--spacing-sm-xl);

      @variant md {
        margin-top: var(--spacing-md-xl);
      }

      @variant lg {
        margin-top: var(--spacing-lg-xl);
      }
    }
  }

  h3 {
    font: var(--h3-medium);

    + * {
      margin-top: var(--spacing-sm-xs);

      @variant md {
        margin-top: var(--spacing-md-xs);
      }

      @variant lg {
        margin-top: var(--spacing-lg-xs);
      }
    }

    ~ h2,
    ~ h3,
    ~ h4 {
      margin-top: var(--spacing-sm-xl);

      @variant md {
        margin-top: var(--spacing-md-xl);
      }

      @variant lg {
        margin-top: var(--spacing-lg-xl);
      }
    }
  }

  h4 {
    font: var(--h4-medium);

    + * {
      margin-top: var(--spacing-sm-xs);

      @variant md {
        margin-top: var(--spacing-md-xs);
      }

      @variant lg {
        margin-top: var(--spacing-lg-xs);
      }
    }

    ~ h2,
    ~ h3,
    ~ h4 {
      margin-top: var(--spacing-sm-xl);

      @variant md {
        margin-top: var(--spacing-md-xl);
      }

      @variant lg {
        margin-top: var(--spacing-lg-xl);
      }
    }
  }

  ol {
    margin-left: 1.3em;
    list-style-type: decimal;
  }

  ul {
    margin-left: 1.3em;
    list-style-type: disc;
  }

  a {
    color: var(--color-blue-500);
    text-decoration: underline;
  }

  blockquote {
    @apply relative mx-auto grid gap-8 text-center text-transparent;

    max-width: 360px;
    padding: 0 var(--spacing-sm-margin-container)
      var(--spacing-sm-margin-section);
    font: var(--h2-bold);
    font-style: italic;
    background: linear-gradient(
      254deg,
      var(--color-blue-400) 8.18%,
      var(--color-blue-600) 90.55%
    );
    background-clip: text;

    @variant md {
      max-width: 600px;
      padding: 0 var(--spacing-md-padding-container)
        var(--spacing-md-margin-section);
    }

    @variant lg {
      max-width: 794px;
      padding: 0 0 var(--spacing-lg-margin-section);
    }

    &::before {
      width: 32px;
      height: 22px;
      content: "";
      background: url("../../images/img-quote.png") 0 0 /100% no-repeat;
    }

    &::after {
      @apply justify-self-end;

      width: 32px;
      height: 22px;
      content: "";
      background: url("../../images/img-quote.png") 0 0 /100% no-repeat;
      transform: scale(-1);
    }
  }

  img {
    @apply mx-auto;
  }
}