// Breakpoint mixins

@mixin break-huge() {
  @media (min-width: #{ ($break-huge) }) {
    @content;
  }
}

@mixin break-wide() {
  @media (min-width: #{ ($break-wide) }) {
    @content;
  }
}

@mixin break-large() {
  @media (min-width: #{ ($break-large) }) {
    @content;
  }
}

@mixin break-large-max() {
  @media (max-width: #{ ($break-large-max) }) {
    @content;
  }
}

@mixin break-medium() {
  @media (min-width: #{ ($break-medium) }) {
    @content;
  }
}

@mixin break-small() {
  @media (min-width: #{ ($break-small) }) {
    @content;
  }
}

@mixin break-small-max() {
  @media (max-width: #{ ($break-small-max) }) {
    @content;
  }
}

@mixin break-mobile() {
  @media (min-width: #{ ($break-mobile) }) {
    @content;
  }
}

// Long content fade mixin
// Creates a fading overlay to signify that the content is longer
// than the space allows.
@mixin long-content-fade(
  $direction: right,
  $size: 20%,
  $color: #fff,
  $edge: 0,
  $z-index: false
) {
  content: "";
  display: block;
  pointer-events: none;
  position: absolute;
  user-select: none;

  @if $z-index {
    z-index: $z-index;
  }

  @if $direction == "bottom" {
    background: linear-gradient(to top, rgba($color, 0), $color 90%);
    left: $edge;
    right: $edge;
    top: $edge;
    bottom: calc(100% - $size);
    width: auto;
  }

  @if $direction == "top" {
    background: linear-gradient(to bottom, rgba($color, 0), $color 90%);
    top: calc(100% - $size);
    left: $edge;
    right: $edge;
    bottom: $edge;
    width: auto;
  }

  @if $direction == "left" {
    background: linear-gradient(to left, rgba($color, 0), $color 90%);
    top: $edge;
    left: $edge;
    bottom: $edge;
    right: auto;
    width: $size;
    height: auto;
  }

  @if $direction == "right" {
    background: linear-gradient(to right, rgba($color, 0), $color 90%);
    top: $edge;
    bottom: $edge;
    right: $edge;
    left: auto;
    width: $size;
    height: auto;
  }
}

//
// Button states and focus styles
//

// Buttons with rounded corners.
@mixin button-style__disabled {
  cursor: default;
  opacity: 0.6;
}

@mixin button-style__hover {
  background-color: $white;
  box-shadow: inset 0 0 0 1px $light-gray-500, inset 0 0 0 2px $white,
    0 1px 1px rgba($dark-gray-900, 0.2);
  color: $dark-gray-900;
}

@mixin button-style__active() {
  background-color: $white;
  box-shadow: inset 0 0 0 1px $light-gray-700, inset 0 0 0 2px $white;
  color: $dark-gray-900;
  outline: none;
}

@mixin button-style__focus-active() {
  background-color: $white;
  box-shadow: inset 0 0 0 1px $dark-gray-300, inset 0 0 0 2px $white;
  color: $dark-gray-900;

  // Windows High Contrast mode will show this outline, but not the box-shadow.
  outline: 2px solid transparent;
  outline-offset: -2px;
}

// Switch.
@mixin switch-style__focus-active() {
  box-shadow: 0 0 0 2px $white, 0 0 0 3px $dark-gray-300;

  // Windows High Contrast mode will show this outline, but not the box-shadow.
  outline: 2px solid transparent;
  outline-offset: 2px;
}

// Formatting Buttons.
@mixin formatting-button-style__hover {
  box-shadow: inset 0 0 0 1px $dark-gray-500, inset 0 0 0 2px $white;
  color: $dark-gray-500;
}

@mixin formatting-button-style__active() {
  background: $dark-gray-500;
  box-shadow: none;
  color: $white;
  outline: none;
}

@mixin formatting-button-style__focus() {
  box-shadow: inset 0 0 0 1px $dark-gray-500, inset 0 0 0 2px $white;

  // Windows High Contrast mode will show this outline, but not the box-shadow.
  outline: 2px solid transparent;
  outline-offset: -2px;
}

// Tabs, Inputs, Square buttons.
@mixin input-style__neutral() {
  border-radius: $radius-round-rectangle;
  border: $border-width solid $dark-gray-150;
  box-shadow: 0 0 0 transparent;
  transition: box-shadow 0.1s linear;
}

@mixin input-style__focus() {
  border-color: $blue-medium-500;
  box-shadow: 0 0 0 1px $blue-medium-500;
  color: $dark-gray-900;

  // Windows High Contrast mode will show this outline, but not the box-shadow.
  outline: 2px solid transparent;
  outline-offset: -2px;
}

// Square buttons.
@mixin square-style__neutral() {
  outline-offset: -1px;
}

@mixin square-style__focus() {
  box-shadow: none;
  color: $dark-gray-900;
  outline: 1px solid $dark-gray-300;
}

// Menu items.
@mixin menu-style__neutral() {
  border: none;
  box-shadow: none;
}

@mixin menu-style__hover() {
  border: none;
  box-shadow: none;
  color: $dark-gray-900;
}

@mixin menu-style__focus() {
  border: none;
  box-shadow: none;
  color: $dark-gray-900;
  outline-offset: -2px;
  outline: 1px dotted $dark-gray-500;
}

// Blocks in the Library.
@mixin block-style__disabled {
  cursor: default;
  opacity: 0.6;
}

@mixin block-style__hover {
  background: $light-gray-100;
  color: $dark-gray-900;
}

@mixin block-style__focus-active() {
  box-shadow: 0 0 0 2px $blue-medium-500;
  color: $dark-gray-900;

  // Windows High Contrast mode will show this outline, but not the box-shadow.
  outline: 2px solid transparent;
  outline-offset: -2px;
}

// Applies editor left position to the selector passed as argument
@mixin editor-left($selector) {
  #{$selector} {
    // Set left position when auto-fold is not on the body element.
    left: 0;

    @include break-medium() {
      left: $admin-sidebar-width;
    }
  }

  .auto-fold #{$selector} {
    // Auto fold is when on smaller breakpoints, nav menu auto colllapses.
    @include break-medium() {
      left: $admin-sidebar-width-collapsed;
    }

    @include break-large() {
      left: $admin-sidebar-width;
    }
  }

  // Sidebar manually collapsed.
  .folded #{$selector} {
    left: 0;

    @include break-medium() {
      left: $admin-sidebar-width-collapsed;
    }
  }

  // Mobile menu opened.
  @media (max-width: #{ ($break-medium) }) {
    .auto-fold .wp-responsive-open #{$selector} {
      left: $admin-sidebar-width-big;
    }
  }

  // In small screens with resposive menu expanded there is small white space.
  @media (max-width: #{ ($break-small) }) {
    .auto-fold .wp-responsive-open #{$selector} {
      margin-left: -18px;
    }
  }

  body.is-fullscreen-mode #{$selector} {
    left: 0 !important;
  }
}

// Applies editor right position to the selector passed as argument
@mixin editor-right($selector) {
  #{ $selector } {
    right: 0;
  }

  .edit-post-layout.is-sidebar-opened #{ $selector } {
    right: $sidebar-width;
  }
}

// Styles that are reused verbatim in a few places
@mixin caption-style() {
  margin-top: 0.5em;
  margin-bottom: 1em;
  color: $dark-gray-500;
  text-align: center;
  font-size: $default-font-size;
}

@mixin dropdown-arrow() {
  content: "";
  pointer-events: none;
  display: block;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 5px solid currentColor;
  margin-left: $grid-size-small;

  // This gives the icon space on the right side consistent with the material
  // icon standards.
  margin-right: 2px;
}