// Responsive breakpoints mixin
@mixin add_variables( $view: frontend ) {

  @if frontend == $view {

    :root {
      @content;
    }
  }

  @if editor == $view {

    :root,
    body {
      @content;
    }
  }
}

// Button style
// - Applies button styles to blocks and elements that share them.
@mixin button-style( $version: default ) {

  cursor: pointer;
  font-weight: var(--button--font-weight);
  font-family: var(--button--font-family);

  line-height: var(--button--line-height);
  background-color: var(--button--color-background);
  border-radius: var(--button--border-radius);
  border: var(--button--border-width) solid var(--button--color-background);
  color: var(--button--color-text);
  display: inline-block;

  &:link {
    text-decoration: none;

  }

  @if $version == default {

    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    padding-top: 8px; // font-line-height fix
    font-size: var(--button--font-size);

  }

  @if $version == large {
    padding: var(--button--padding-vertical-large) var(--button--padding-horizontal-large);
    padding-bottom: 4px;
    font-size: var(--button--font-size-large);
  }


  &:focus {
    background: transparent;
    outline-offset: -6px;
    outline: var(--button--focus-outline);

    .is-dark-theme & {
      color: var(--button--color-background);
    }

    &:not(.has-background) {
      color: var(--button--color-text-hover);
    }
  }

  &:hover {
    color: var(--button--color-text-hover);
    background: transparent;
    border-color: var(--button--color-background);
    text-decoration: none;

  }

  &:focus-visible {
    @include focus-visible();
  }

  &:disabled {
    background-color: var(--global--color-gray-lighten);
    border-color: var(--global--color-gray-lighten);
    color: var(--button--color-text-active);
  }
}

@mixin button-style-simple() {
  display: inline-block;
  padding: 10px 0;
  font-weight: 400;
  font-family: var(--global--font-secondary);
  font-size: var(--button--font-size);
  color: var(--global--color-secondary);
  text-transform: uppercase;

  &:hover {
    text-decoration: underline;
    text-decoration-style: dotted;
  }
}

@mixin meta-style() {
  color: var(--global--color-text-lighten);
  font-size: var(--global--font-size-sm);
  line-height: var(--global--line-height-sm);
}

@mixin title-box-style() {
  color: var(--global--color-text-base);
  font-family: var(--latest-posts--title-font-family);
  font-size: var(--heading--font-size-h5);
  font-weight: var(--heading--font-weight);
  line-height: var(--heading--line-height-h5);
}

@mixin chip-style() {
  display: inline-block;
  color: var(--global--color-text-base);
  font-size: var(--global--font-size-xs);
  line-height: var(--global--line-height-xs);
  background-color: var(--global--color-gray-base);
  padding: 0 15px;
  border-radius: 20px;

  &:link,
  &:visited {
    text-decoration: none;

  }


  &:hover {
    @include hover-underline();
  }
}

@mixin chip-fill-style() {
  display: inline-block;
  color: var(--global--color-invert);
  font-size: var(--global--font-size-xs);
  line-height: var(--global--line-height-xs);
  background: var(--global--color-third-base);
  padding: 0 6px;

  &:link,
  &:visited {
    text-decoration: none;
    color: var(--global--color-invert);
  }

  &:hover {

    @include hover-underline();

  }
}

@mixin menu-caret($size) {

  &:after {

    display: inline-block;
    position: absolute;
    transform: translateY(-50%) rotate(45deg);
    content: '';
    width: 0.6rem;
    height: 0.6rem;
    margin-left: $size;
    border-right: $size solid var(--button--color-text);;
    border-bottom: $size solid var(--button--color-text);;
    right: 0.5rem;

  }

}

@mixin form-invert() {

  border-color: var(--global--color-invert);
  color: var(--global--color-invert);
  background: var(--global--color-surface-invert);

  &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: var(--global--color-invert);
  }
  &::-moz-placeholder { /* Firefox 19+ */
    color: var(--global--color-invert);
  }
  &:-ms-input-placeholder { /* IE 10+ */
    color: var(--global--color-invert);
  }
  &:-moz-placeholder { /* Firefox 18- */
    color: var(--global--color-invert);
  }

}

@mixin innerblock-margin-clear($container) {

  // Clear the top margin for the first-child.
  > #{$container} > *:first-child {
    margin-top: 0;
  }

  // Last child that is not the appender.
  > #{$container} > *:last-child:not(.block-list-appender) {
    margin-bottom: 0;
  }

  // When selected, the last item becomes the second last because of the appender.
  &.has-child-selected > #{$container} > *:nth-last-child(2),
  &.is-selected > #{$container} > *:nth-last-child(2) {
    margin-bottom: 0;
  }
}

@mixin link-style() {

  &:link,
  &:active {
    cursor: pointer;
    text-decoration: underline;
    color: var(--global--color-text-link);

  }

  &:hover {

    @include hover-global();

  }

  &:focus-visible {

    @include focus-visible();

  }

  &:visited {
    color: var(--global--color-text-link-visited);
    text-decoration-style: dotted;
  }


}

@mixin hover-global() {
  text-decoration: underline;
  color: var(--global--color-text-link-hover);
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  text-decoration-skip-ink: all;
  text-decoration-color: var(--global--color-text-link-hover);
}

@mixin focus-visible() {
  background: rgba(255, 255, 255, .9);
  outline: var(--primary-nav--focus-outline);
  outline-offset: 3px;
}

@mixin hover-navigation() {
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--primary-nav--border-color);
  text-decoration-thickness: 2px;

}

@mixin hover-underline() {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}