@use "design";

$main-color: design.$purple-60;
$bg-color: design.$purple-90;

.debugButton,
.debugIcon {
  padding: 3px;
  z-index: design.$z-debug-button;

  border-radius: 100px !important; // Override card rounded corners

  span {
    text-indent: -9999em;
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 100px;
  }
}

.debugButton {
  cursor: pointer;

  span {
    background: $bg-color;
    position: relative;

    transition: 100ms all;
    outline: 4px solid $bg-color;

    // Triangle.
    &::after {
      content: "";
      display: block;
      position: absolute;
      inset: 0;

      background: $main-color;
      transition: 100ms all;

      // This makes it an equilateral triangle.
      $size: 86.6%;
      $start: (100% - $size);
      clip-path: polygon($start 0%, 100% 50%, $start 100%);
    }
  }

  &:hover span {
    outline: 5px solid $bg-color;
  }

  &.isDebugOpen span {
    outline: 5px solid $bg-color;

    &:hover {
      opacity: 0.9;
    }

    &::after {
      transform: rotateZ(90deg);
    }
  }

  &:active span {
    transform: scale(85%);
  }
}

.debugIcon {
  display: inline-block;
  vertical-align: middle;

  // It's a circle.
  span {
    background: $main-color;
    outline: 3px solid $bg-color;
  }
}

.debugContent {
  // padding: 15px;
  border: 2px solid design.$purple-60;
  // margin: 10px 0;
  // border-radius: 4px;
  box-shadow: 0 0 10px design.$purple-90;
  // background: design.$purple-98;
  margin-bottom: 15px;
  // background: #fff;
}