// Smooth rendering for all browsers
* {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

// Fix for dashicon
.dashicons-before {
  display: flex;
  align-items: center;
  justify-content: center;

  &::before {
    padding: 0 !important;
  }

  img {
    padding: 0 !important;
    border: none;
    width: auto;
    margin: 0 auto;
  }
}

#wpwrap {
  @apply bg-white-100;
}

##{$plugin_slug}-admin {
  @apply text-sm text-blue-100 leading-normal;

  h1,
  h2,
  h3,
  h4 {
    @apply text-blue-100 font-playfair font-bold leading-tight p-0;
  }

  h1,
  h2 {
    display: inline;
    background-image: linear-gradient(#f77355, #f77355);
    background-size: 100% 8px;
    background-position: 0 85%;
    background-repeat: no-repeat;
  }

  h1 {
    @apply text-xxl;
  }

  h2 {
    @apply text-3xl;
  }

  h3 {
    @apply text-xl;
  }

  h4 {
    @apply text-3lg;
  }

  // Link styles live in links.css: node-sass can't compile the :not() selector they need

  img {
    @apply border-none;
  }

  blockquote {
    @apply font-playfair font-bold leading-tight text-3xl;

    margin: 1em auto;
  }

  .promo {
    @apply border border-dashed border-orange-100 text-orange-100 font-bold font-mono px-2;
  }

  .wrap {
    @apply mt-8;
  }

  .wp-heading-inline {
    @apply text-xl;

    background-image: none;
  }

  .widefat {
    td {
      @apply font-normal;
    }
  }
}

.hidden-wrapper {
  display: none !important;

  @media (min-width: $screen-2xl-min) {
    display: block !important;
  }
}