.extended-color{
    color: var(--mb-color, var(--text-color));
    &:hover{ color: var(--text-color-hover, var(--text-color)); }

    @media screen and (min-width: 768px) {
        color: var(--tb-color, var(--text-color));
    }
    @media screen and (min-width: 1280px) {
        color: var(--text-color, #000);
    }
}

.extended-bg-color{
    background-color: var(--bg-color, transparent);
    transition: background-color 0.2s ease;
    &:hover{ background-color: var(--bg-color-hover, var(--bg-color, transparent)); }
}

.extended-max-width{
    max-width: var(--extended-width-mb, 100%);

    @media screen and (min-width: 768px) {
        max-width: var(--extended-width, var(--extended-width-mb));
    }
}

.extended-border{
  border: var(--x-border-color, unset);
  &:hover{ border: var(--x-border-color-hover, var(--x-border-color)); }
}

.extended-border-radius{
  border-radius: var(--x-border-radius, 0);
}

.extended-text-align{
  text-align: var(--text-align, left);
}

.extended-highlight-style{
    em{
        font-style: italic;
        position: relative;
        z-index: 1;
    }

    &.non-italic em, &.non-italic em strong { font-style: normal; } 

    &.italics-no-decoration em { font-style: italic; }

    &.text-color{
        a { text-decoration: none; }
        em { color: var(--highlight-text-color); }
    }

    &.underline-digital{
        a { text-decoration: none; }
        em{
            text-decoration: underline;
            text-decoration-color: var(--highlight-text-color);
            color: var(--highlight-text-color);
        }
    }

    &.highlight-color em:before{
        content: "";
        position: absolute;
        top: 0;
        left: -2%;
        right: -2%;
        height: 100%;
        background: linear-gradient(0deg, var(--highlight-color, transparent), var(--highlight-color, transparent)) no-repeat right bottom / 100% 100%;
        animation: highlight-animation 0.7s ease-out forwards;
        transform-origin: left;
        z-index: -1;
    }

    &.line-through em{
        text-decoration: line-through;
        color: var(--highlight-text-color);
    }

    &.over-line em{
        text-decoration: overline;
        color: var(--highlight-text-color);
    }

}

.extended-highlight-font-size em{
    font-size: var(--mb-highlight-font-size, 16px);
    font-weight: var(--font-weight, 400);

    @media screen and (min-width: 768px) {
        font-size: var(--tb-highlight-font-size, var(--mb-highlight-font-size));
    }
    @media screen and (min-width: 1280px) {
        font-size: var(--highlight-font-size, 16px);
    }
}

body .hide-this {
    display: none;
}

.extended-font-size,
.extended-font-size-all-chilren *,
.extended-font-size p {
  font-weight: var(--font-weight, 400);
  font-size: var(--mb-font-size, var(--font-size, 16px));
  
  @media screen and (min-width: 768px) {
    font-size: var(--tb-font-size, var(--font-size, 16px));
  }

  @media screen and (min-width: 1280px) {
    font-size: var(--font-size, 16px);
  }

}

.extended-padding{
  padding-top: var(--mb-padding-top, var(--padding-top));
  padding-bottom: var(--mb-padding-bottom, var(--padding-bottom));

  @media (min-width: 768px) {
    padding-top: var(--tb-padding-top, var(--padding-top));
    padding-bottom: var(--tb-padding-bottom, var(--padding-bottom));
  }

  @media (min-width: 1280px) {
    padding-top: var(--padding-top, 40px);
    padding-bottom: var(--padding-bottom, 40px);
  }
}
.extended-padding-top{
  padding-top: var(--mb-padding-top, var(--padding-top));

  @media (min-width: 768px) {
    padding-top: var(--tb-padding-top, var(--padding-top));
  }

  @media (min-width: 1280px) {
    padding-top: var(--padding-top, 40px);
  }
}

.extended-padding-bottom {
  padding-top: var(--mb-padding-top, var(--padding-top));

  @media (min-width: 768px) {
    padding-top: var(--tb-padding-top, var(--padding-top));
  }

  @media (min-width: 1280px) {
    padding-top: var(--padding-top, 40px);
  }
}


.extended-margin{
  margin-top: var(--mb-margin-top, var(--margin-top));
  margin-bottom: var(--mb-margin-bottom, var(--margin-bottom));

  @media (min-width: 768px) {
    margin-top: var(--tb-margin-top, var(--margin-top));
    margin-bottom: var(--tb-margin-bottom, var(--margin-bottom));
  }

  @media (min-width: 1280px) {
    margin-top: var(--margin-top, 40px);
    margin-bottom: var(--margin-bottom, 40px);
  }
}
.extended-margin-top{
  margin-top: var(--mb-margin-top, var(--margin-top));

  @media (min-width: 768px) {
    margin-top: var(--tb-margin-top, var(--margin-top));
  }

  @media (min-width: 1280px) {
    margin-top: var(--margin-top, 40px);
  }
}
.extended-margin-bottom {
  margin-top: var(--mb-margin-top, var(--margin-top));

  @media (min-width: 768px) {
    margin-top: var(--tb-margin-top, var(--margin-top));
  }

  @media (min-width: 1280px) {
    margin-top: var(--margin-top, 40px);
  }
}