/* Base
--------------------------------------------- */

@each $name, $color in $gutenberg-colors {
  .has-text-color.has-#{$name}-color {
    color: $color !important;
  }

  .has-background.has-#{$name}-background-color {
    background-color: $color !important;
  }

  .has-background-dim.has-#{$name}-background-color {
    background-color: $color !important;
  }

  .wp-block-separator.has-#{$name}-color {
    border-color: $color !important;
  }
}

/* Base
--------------------------------------------- */
.wp-block-image {
  @apply
    mb-0;

  img {
    @apply
      w-full;
  }
}

.post-content-wrapper p {
  > img {
    @apply
      inline
      ml-7;
  }

  > a {
    > img {
      @apply
        inline
        ml-7;
    }
  }
}

.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:not(:first-child) {
  @apply
    ml-0;
}

.wp-block-video {
  @apply
    mb-0;
}

.wp-block-spacer {
  &.is-style-medium {
    height: 30px !important;

    @screen lg {
      height: 60px !important;
    }
  }

  &.is-style-big {
    height: 60px !important;

    @screen lg {
      height: 80px !important;
    }
  }
}

.wp-block-buttons {
  @apply
    gap-8;

  &.is-vertical {
    @apply
      gap-2;
  }

  &.is-style-inline {
    @apply
      flex-nowrap
      overflow-auto
      pb-8;

    > div {
      @apply
        whitespace-nowrap;
    }
  }
}

.wp-block-separator {
  @apply
    my-12;

  &.is-style-default {
    @apply
      max-w-xs
      mx-auto;
  }
}

.block-editor .button.wp-color-result {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
  max-width: 35px;
  margin: 0 0;
  border-bottom: 7px solid;
  padding: 0;
}

.wp-block-cover-image,
.wp-block-cover {
  @apply
    min-h-[unset]
    p-0;
}

.wp-block-cover {
  z-index: 0;
}

$sm: theme("screens.sm");
$md: theme("screens.md");
$lg: theme("screens.lg");
$xl: theme("screens.xl");
$sm-1: theme("screens.sm-1");
$md-1: theme("screens.md-1");
$lg-1: theme("screens.lg-1");
$xl-1: theme("screens.xl-1");

@media screen and (max-width: $sm-1) {
  .is-mobile-hide {
    display: none !important;
  }

  .is-root-container .is-mobile-hide {
    display: block !important;
    opacity: 0.5;

    &[data-type="core/image"] {
      display: table !important;
    }
  }
}

@media screen and (min-width: $sm) and (max-width: $md-1) {
  .is-tablet-hide {
    display: none !important;
  }

  .is-root-container .is-tablet-hide {
    display: block !important;
    opacity: 0.5;

    &[data-type="core/image"] {
      display: table !important;
    }
  }
}

@media screen and (min-width: $md) and (max-width: $xl-1) {
  .is-desktop-hide {
    display: none !important;
  }

  .is-root-container .is-desktop-hide {
    display: block !important;
    opacity: 0.5;

    &[data-type="core/image"] {
      display: table !important;
    }
  }
}

@media screen and (min-width: $xl) {
  .is-wide-hide {
    display: none !important;
  }

  .is-root-container .is-wide-hide {
    display: block !important;
    opacity: 0.5;

    &[data-type="core/image"] {
      display: table !important;
    }
  }
}

div.wp-block-columns {
  @apply
    mb-0

    -mx-2
    lg:-mx-4;

  div.wp-block-column {
    @apply
      ml-0

      px-2
      lg:px-4;

    &:not(:only-child) {
      &.is-card-layout {
        flex-basis: unset !important;
      }
    }

    &.is-card-layout {
      @apply
        flex-grow-0
        transition-all
        w-1/2

        hover:opacity-50;
    }
  }
}

.thor-tablet-one-column {
  > div {
    @media (max-width: 781px) and (min-width: 600px) {
      flex-basis: 100% !important;

      &:nth-child(even) {
        margin-left: 0 !important;
      }
    }
  }
}

.wp-block-file {
  @apply mb-8 pt-8 border-t border-solid border-black flex items-center justify-between;
}

.has-left-alignment {
  @apply
    justify-start;
}

.has-center-alignment {
  @apply
    mx-auto;
}

.has-right-alignment {
  @apply
    flex
    float-right
    clear-both
    flex-col
    items-end;
}

.has-xs-max-width {
  @apply
    max-w-[380px];
}

.has-sm-max-width {
  @apply
    max-w-[500px];
}

.has-md-max-width {
  @apply
    max-w-screen-sm;
}

.has-ml-max-width {
  @apply
    max-w-screen-md;

  max-width: calc(theme("screens.md") - 2rem);
}

.has-lg-max-width {
  @apply
    max-w-[800px];
}

.has-xl-max-width {
  @apply
    max-w-screen-lg;

  max-width: calc(theme("screens.lg") - 2rem);
}

.has-2xl-max-width {
  @apply
    max-w-screen-xl;

  max-width: calc(theme("screens.xl") - 2rem);
}

.has-3xl-max-width {
  @apply
    max-w-screen-2xl;

  max-width: calc(theme("screens.2xl") - 2rem);
}

.has-4xl-max-width {
  @apply
    max-w-screen-3xl;

  max-width: calc(theme("screens.3xl") - 2rem);
}

.has-container-max-width {
  @apply
    max-w-screen-3xl
    px-10;
}

.wp-block-media-text__media {
  figure {
    @apply h-full;

    img {
      @apply w-full h-full;

      object-fit: cover;
    }
  }
}

.single-post-inner,
.post-content-wrapper {
  ul {
    li {
      @apply
        list-none
        text-base;

      ul {
        @apply
          mt-1
          mb-4;

        li {
          @apply
            ml-6;
        }
      }

      &:not(.blocks-gallery-item) {
        &::before {
          @apply
            inline-block
            w-6
            relative;

          content: "\2022";
          top: 2px;
        }
      }
    }
  }

  ol {
    counter-reset: ordinate-list;

    li {
      @apply
        text-base
        list-none;

      counter-increment: ordinate-list;

      &::before {
        @apply
          inline-block
          w-6
          relative;

        content: counter(ordinate-list) ". ";
        top: 2px;
      }
    }
  }
}

.thor-revert {
  &.thor-tablet-one-column {
    @apply flex-col-reverse;

    @media screen and (min-width: 781px) {
      @apply flex-row;
    }
  }

  &.thor-tablet-two-columns {
    @apply flex-col-reverse;

    @media screen and (min-width: 600px) {
      @apply flex-row;
    }
  }
}
