@mixin over_undershoot() {
  overshoot {
    &.top {
      background-image: -gtk-gradient(radial, center top, 0.55, center top, 0.6, from(gtkalpha($color_shadow, 0.2)), to(transparent));
      background-size: 100% 60%;
      background-repeat: no-repeat;
      background-position: center top;
      background-color: transparent;
      border: none;
      box-shadow: none;
    }

    &.bottom {
      background-image: -gtk-gradient(radial, center bottom, 0.55, center bottom, 0.6, from(gtkalpha($color_shadow, 0.2)), to(transparent));
      background-size: 100% 60%;
      background-repeat: no-repeat;
      background-position: center bottom;
      background-color: transparent;
      border: none;
      box-shadow: none;
    }

    &.left {
      background-image: -gtk-gradient(radial, left center, 0.55, left center, 0.6, from(gtkalpha($color_shadow, 0.2)), to(transparent));
      background-size: 60% 100%;
      background-repeat: no-repeat;
      background-position: left center;
      background-color: transparent;
      border: none;
      box-shadow: none;
    }

    &.right {
      background-image: -gtk-gradient(radial, right center, 0.55, right center, 0.6, from(gtkalpha($color_shadow, 0.2)), to(transparent));
      background-size: 60% 100%;
      background-repeat: no-repeat;
      background-position: right center;
      background-color: transparent;
      border: none;
      box-shadow: none;
    }
  }

  undershoot {
    &.top {
      background-color: transparent;
      background-image: linear-gradient(to left, gtkalpha($light_shadow, 0.2) 50%, gtkalpha($dark_shadow, 0.2) 50%);
      padding-top: 1px;
      background-size: 10px 1px;
      background-repeat: repeat-x;
      background-origin: content-box;
      background-position: center top;
    }

    &.bottom {
      background-color: transparent;
      background-image: linear-gradient(to left, gtkalpha($light_shadow, 0.2) 50%, gtkalpha($dark_shadow, 0.2) 50%);
      padding-bottom: 1px;
      background-size: 10px 1px;
      background-repeat: repeat-x;
      background-origin: content-box;
      background-position: center bottom;
    }

    &.left {
      background-color: transparent;
      background-image: linear-gradient(to top, gtkalpha($light_shadow, 0.2) 50%, gtkalpha($dark_shadow, 0.2) 50%);
      padding-left: 1px;
      background-size: 1px 10px;
      background-repeat: repeat-y;
      background-origin: content-box;
      background-position: left center;
    }

    &.right {
      background-color: transparent;
      background-image: linear-gradient(to top, gtkalpha($light_shadow, 0.2) 50%, gtkalpha($dark_shadow, 0.2) 50%);
      padding-right: 1px;
      background-size: 1px 10px;
      background-repeat: repeat-y;
      background-origin: content-box;
      background-position: right center;
    }
  }

  .overlay-bar {
    background-color: gtkalpha($dark_shadow, 0.8);
    border-radius: 0;
    padding: 3px 6px;
    margin: 3px;

    label {
      color: $tooltip_fg_color;
    }
  }
}
