/**********
 * Frames *
 **********/
frame > border,
.frame {
  margin: 0;
  padding: 0;
  border: $border_size solid $border_color;
  border-radius: 0;
  box-shadow: none;

  &.flat { border-style: none; }
}

@at-root %frame_flat,
frame.flat > border { @extend %frame_flat; } // for backporting

actionbar > revealer > box {
  padding: $container_padding;
  border-top: $border_size solid $border_color;

  button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %flat_button; }
}

scrolledwindow {
  viewport.frame { // avoid double borders when viewport inside scrolled window
    border-style: none;
  }

  // This is used when content is touch-dragged past boundaries.
  // draws a box on top of the content, the size changes programmatically.
  @at-root overshoot {
    &.top { @include overshoot(top); }

    &.bottom { @include overshoot(bottom); }

    &.left { @include overshoot(left); }

    &.right { @include overshoot(right); }
  }

  // Overflow indication, works similarly to the overshoot, the size if fixed tho.
  @at-root undershoot {
    &.top { @include undershoot(top); }

    &.bottom { @include undershoot(bottom); }

    &.left { @include undershoot(left); }

    &.right { @include undershoot(right); }
  }

  @at-root junction { // the small square between two scrollbars
    border-style: solid none none solid;
    border-width: $border_size;
    border-color: $border_color;
    background-color: $base_color;

    &:dir(rtl) { border-style: solid solid none none; }
  }
}

// vbox and hbox separators
separator {
  min-width: $separator_size;
  min-height: $separator_size;
  background-color: transparent;
}

%hide_separators {
  min-width: 0;
  min-height: 0;
  background-color: transparent;
}
