@use "../variables.scss" as *;
@import "../runner-ct-variables.scss";
@import "../../../reporter/src/lib/variables.scss";

/**
 * Styles that cannot be transformed by scoped modules should live here. Examples are:
 *   - override Runner globals (in a pinch)
 *   - publicly interface with 3rd party libs (Resizer)
 */

body, html {
  font-size: 1rem !important;
  font-family: $font-stack-sans;
  font-size: text(m);

  * :focus {
    outline-offset: 1px;
    outline-width: 1px;
    outline-color: $chill-20;
    outline-style: auto;
  }
}

.reporter {
  .runnable-header {
    box-shadow: shadow(m);
  }
}

.runner {
  // @include checkerboard();
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjZGJkYmRiIj48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDVMNSAwWk02IDRMNCA2Wk0tMSAxTDEgLTFaIiBzdHJva2U9IiNjNGM0YzQiIHN0cm9rZS13aWR0aD0iMSI+PC9wYXRoPgo8L3N2Zz4=");
}

.aut-iframe-screenshotting {
  height: min(100vh, 100%) !important;
  overflow: scroll !important;
}

// Prevent left-most Resizer from showing up when the pane is hidden.
.isSpecsListClosed {
  > .Resizer {
    display: none;
  }
}

// Must be globally scoped. Bummer.
$resizerLineSize: 4px;

.Resizer {
  $resize-thickness: 12px;
  background: none;
  transition: background-color 200ms ease-in-out;
  z-index: 10;
  box-sizing: border-box;
  background-clip: padding-box;
  &:after {
    content: '';
    position: relative;
    display: block;
    background: transparent;
    transition: background 200ms ease;
    position: fixed;
  }
  &:hover {
    &:after {
      background: $chill-30;
    }
  }

  &.horizontal {
    margin: -($resize-thickness / 2) 0;
    height: $resize-thickness;
    width: 100%;
    cursor: row-resize;
    border-top: 5px solid rgba(255, 255, 255, 0);
    border-bottom: 5px solid rgba(255, 255, 255, 0);

    &:after {
      height: $resizerLineSize;
      width: 100%;
    }
  }

  &.vertical {
    margin: 0 -($resize-thickness / 2);
    width: $resize-thickness;
    height: 100%;
    cursor: col-resize;
    border-left: 5px solid rgba(255, 255, 255, 0);
    border-right: 5px solid rgba(255, 255, 255, 0);

    &:after {
      width: $resizerLineSize;
      height: 100%;
    }
  }

  &.disabled {
    display: none;
  }
}