/*-------------------------------------------------------*/
/* Gutenberg Front-end Styles
/*-------------------------------------------------------*/

// Background color
:root .has-gold-background-color {
  background-color: $editor-color-1;
}
:root .has-blue-background-color {
  background-color: $editor-color-2;
}
:root .has-dark-background-color {
  background-color: $editor-color-3;
}
:root .has-grey-background-color {
  background-color: $editor-color-4;
}

// Text color
:root .has-gold-color {
  color: $editor-color-1;
}
:root .has-blue-color {
  color: $editor-color-2;
}
:root .has-dark-color {
  color: $editor-color-3;
}
:root .has-grey-color {
  color: $editor-color-4;
}

/* Buttons
-------------------------------------------------------*/
.wp-block-button .wp-block-button__link {
  @include editor-button;
}

.wp-block-button__link:not(.has-background):visited,
.wp-block-button__link:not(.has-background) {
  background-color: var(--dinery-main-color);
}

.wp-block-button__link:not(.has-background):active,
.wp-block-button__link:not(.has-background):focus,
.wp-block-button__link:not(.has-background):hover {
  background-color: darken($heading-color, 10%);
  color: #fff;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
}

/* Full-width Images
-------------------------------------------------------*/
@include bp-xl-up {
  .fullwidth {
    .entry__article {
      .alignwide {
        margin-left: -220px;
        margin-right: -220px;
        width: auto;
        max-width: none;
      }

      .alignfull {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        max-width: 100vw;
        position: relative;
        z-index: 1;

        img {
          width: 100vw;
        }
      }
    }
  }
}

/* Images
-------------------------------------------------------*/
.wp-block-image {
  .alignleft {
    margin-right: 2em;
    max-width: 40%;

    @include bp-sm-down {
      float: none;
      margin-right: 0;
    }
  }

  .alignright {
    margin-left: 2em;
    max-width: 40%;

    @include bp-sm-down {
      float: none;
      margin-left: 0;
    }
  }
}

/* Cover
-------------------------------------------------------*/
.wp-block-cover {
  margin: 0 0 1.5em;
  font-size: 1rem;
  line-height: 1.3;

  &.alignleft {
    margin: 0.5em 2em 1.5em 0;
  }

  &.alignright {
    margin: 0.5em 0 1.5em 2em;
  }
}

/* Tables
-------------------------------------------------------*/
.wp-block-table {
  width: 100%;
  margin-bottom: 2rem;
}

.wp-block-table.is-style-stripes.has-subtle-light-gray-background-color tr:nth-child(odd),
.wp-block-table.is-style-stripes tr:nth-child(odd) {
  background-color: #f9f9f9;
}

/* Latest Comments
-------------------------------------------------------*/
ol.wp-block-latest-comments {
  padding-left: 0;
}

/* Galleries
-------------------------------------------------------*/
ul.wp-block-gallery,
.wp-block-gallery ul {
  list-style: none;
  padding-left: 0;
}

/* Captions
-------------------------------------------------------*/
.wp-block-image figcaption,
.wp-block-embed figcaption,
.wp-block-audio figcaption {
  color: $meta-color;
}

.wp-block-image figcaption {
  margin-top: 1em;
}

/* Separators
-------------------------------------------------------*/
hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  opacity: 1;
  border-top: 1px solid $border-color;
}

.wp-block-separator {
  border-color: $border-color;
}

.wp-block-separator:not(.is-style-wide):not(.is-style-dots),
.wp-block-separator.is-style-default {
  max-width: 100px;
  margin-left: auto;
  margin-right: auto;
}

.wp-block-separator.is-style-dots:before {
  font-weight: 700;
  color: $text-color;
}

/* Blockquote / Pullquote
-------------------------------------------------------*/
blockquote {
  overflow: hidden;
}

.wp-block-quote {
  &.has-text-align-center {
    border: 0;
  }

  &.has-text-align-right {
    border-left: 0;
    border-right-width: 3px;
    border-right-style: solid;
  }

  &.is-large,
  &.is-style-large {
    padding: 12px 40px;
    margin-top: 40px;
    margin-bottom: 40px;

    p {
      font-size: $blockquote-text-font-size--large;
    }

    cite,
    footer {
      font-size: $blockquote-citation-font-size--large;
    }
  }
}

.wp-block-pullquote {
  text-align: left;
  position: relative;
  line-height: 1.5;
  padding: 0.1em 1em 0.2em 2.5em;
  margin-bottom: 30px;
  margin-top: 0;
  color: $heading-color;

  &.alignleft,
  &.alignright {
    font-size: $pullquote-text-font-size;
  }

  blockquote {
    margin: 0;
    border: 0;
    padding: 0;
    line-height: normal;
  }

  &::before {
    content: "“";
    color: var(--dinery-main-color);
    left: 0;
    top: 0;
    position: absolute;
    font-size: 5rem;
    line-height: 1;
  }

  p {
    color: inherit;
  }

  cite {
    opacity: 0.7;
  }

  blockquote:not(.has-text-color) cite {
    color: $text-color;
  }

  @include bp-sm-up {
    &.alignleft {
      margin-right: 2em /*!rtl:end:ignore*/;
    }

    &.alignright {
      margin-left: 2em /*!rtl:end:ignore*/;
    }
  }
}

// Solid Color
.wp-block-pullquote.is-style-solid-color {
  margin-top: 10px;
  padding: 40px 0;

  &::before {
    left: 10px;
    top: 10px;
  }

  &.alignleft blockquote p,
  &.alignright blockquote p {
    font-size: $pullquote-text-font-size--small;
  }
}

/* Social Icons
-------------------------------------------------------*/
ul.wp-block-social-links {
  padding: 0;

  .wp-social-link a:focus {
    color: currentColor;
    fill: currentColor;
  }
}

/* Latest Posts
-------------------------------------------------------*/
.wp-block-latest-posts {
  &.wp-block-latest-posts__list {
    padding: 0;

    li {
      margin-bottom: 24px;
    }
  }

  &__featured-image {
    margin-bottom: 10px;
  }

  a {
    display: inline-block;
    line-height: 1.3;
  }
}