/**
 * Styles for rendering the overlay of the Workbench popup.
 */

$diamond-height: 8;

/**
 * Provides styles for the workbench popup.
 */
@mixin install-global-styles() {
  .cdk-overlay-pane.wb-popup {
    background-color: var(--sci-color-background-elevation);
    color: var(--sci-color-text);
    border-radius: var(--sci-corner);
    box-shadow: var(--sci-elevation) var(--sci-static-color-black);
    border: 1px solid var(--sci-color-border);
    display: grid;

    //::before is used as diamond-border
    //::after is used as diamond-content

    &::before, &::after {
      content: '';
      display: inline-block;
      position: absolute;
      border: #{$diamond-height}px solid transparent;
    }

    &.wb-north {
      margin-bottom: #{$diamond-height}px;

      &::before {
        bottom: -#{$diamond-height}px;
        left: calc(50% - #{$diamond-height}px);
        border-bottom-width: 0;
        border-top-color: var(--sci-color-border);
      }

      &::after {
        bottom: -#{$diamond-height - 1}px;
        left: calc(50% - #{$diamond-height}px);
        border-bottom-width: 0;
        border-top-color: var(--sci-color-background-elevation);
      }
    }

    &.wb-south {
      margin-top: #{$diamond-height}px;

      &::before {
        top: -#{$diamond-height}px;
        left: calc(50% - #{$diamond-height}px);
        border-top-width: 0;
        border-bottom-color: var(--sci-color-border);
      }

      &::after {
        top: -#{$diamond-height - 1}px;
        left: calc(50% - #{$diamond-height}px);
        border-top-width: 0;
        border-bottom-color: var(--sci-color-background-elevation);
      }
    }

    &.wb-east {
      margin-left: #{$diamond-height}px;

      &::before {
        left: -#{$diamond-height}px;
        top: calc(50% - #{$diamond-height}px);
        border-left-width: 0;
        border-right-color: var(--sci-color-border);
      }

      &::after {
        left: -#{$diamond-height - 1}px;
        top: calc(50% - #{$diamond-height}px);
        border-left-width: 0;
        border-right-color: var(--sci-color-background-elevation);
      }
    }

    &.wb-west {
      margin-right: #{$diamond-height}px;

      &::before {
        right: -#{$diamond-height}px;
        top: calc(50% - #{$diamond-height}px);
        border-right-width: 0;
        border-left-color: var(--sci-color-border);
      }

      &::after {
        right: -#{$diamond-height - 1}px;
        top: calc(50% - #{$diamond-height}px);
        border-right-width: 0;
        border-left-color: var(--sci-color-background-elevation);
      }
    }
  }
}