

$primary-color: dodgerblue;
$light-color: white;
$dark-color: black;
$light-grey: lightgrey;
$background-color: #f9f9f9;
$button-size: 31px;

.view-wrapper {
  height: 100%;
  width: 100%;
  margin: 0;
  display: flex;
  box-shadow: none;
  background: $background-color;
  transition: opacity 0.167s;
  opacity: 1;
  outline: none;
  user-select: none;
  position: relative;

  > .graph {
    align-content: stretch;
    flex: 1;
    width: 100%;
    height: 100%;
  }

  .node {
    .shape {
      > use.node {
        color: $primary-color;
        stroke: $dark-color;
        fill: $light-color;
        filter: url(#dropshadow);
        stroke-width: 0.5px;
        cursor: pointer;
        user-select: none;

        &.hovered {
          stroke: $primary-color;
        }
        &.selected {
          color: $light-color;
          stroke: $primary-color;
          stroke-width: 1px;
          fill: $primary-color;
        }
      }
    }

    .node-text {
      fill: $dark-color;
      cursor: pointer;
      user-select: none;
      &.selected {
        fill: $light-color;
        stroke: $light-color;
      }
    }
  }

  .edge {
    color: $light-color;
    stroke: $primary-color;
    stroke-width: 2px;
    marker-end: url(#end-arrow);
    cursor: pointer;

    .edge-text {
      stroke-width: 0.5px;
      fill: $primary-color;
      stroke: $primary-color;

      cursor: pointer;
      user-select: none;

      &.edge-label-text {
        font-size: 11px; 
        stroke: none;
        fill: black;
      }
    }

    &.selected {
      color: $primary-color;
      stroke: $primary-color;

      .edge-text {
        fill: $light-color;
        stroke: $light-color;
      }
    }
  }

  .edge-mouse-handler {
    stroke: black;
    opacity: 0;
    color: transparent;
    stroke-width: 15px;
    cursor: pointer;
    pointer-events: all;
  }

  .arrow {
    fill: $primary-color;
  }

  .graph-controls {
    position: absolute;
    bottom: 30px;
    left: 15px;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 15px;
    align-items: center;
    user-select: none;

    > .slider-wrapper {
      background-color: $light-color;
      color: $primary-color;
      border: solid 1px $light-grey;
      padding: 6.5px;
      border-radius: 2px;

      > span {
        display: inline-block;
        vertical-align: middle;
      }

      > .slider {
        position: relative;
        margin-left: 4px;
        margin-right: 4px;
        cursor: pointer;
        vertical-align: middle;
      }
    }

    .slider-button {
      background-color: $light-color;
      fill: $primary-color;
      border: solid 1px $light-grey;
      outline: none;
      width: $button-size;
      height: $button-size;
      border-radius: 2px;
      cursor: pointer;
      margin: 0;

      > svg {
        vertical-align: middle;
      }
    }
  }

  .circle {
    fill: $light-grey;
  }

  .highlight-area {
    fill: rgb(0, 149, 210);
    fill-opacity: 0.15;
    stroke: rgba(57, 165, 209, 0.5);
    stroke-width: 2;
  }

  .region {
    fill: rgb(0, 149, 210);
    fill-opacity: 0.15;
    stroke: rgba(57, 165, 209, 0.5);
    stroke-width: 2;
  }
  
  .region-top {
    fill-opacity: 0;
    stroke: rgba(57, 165, 209, 0.5);
    stroke-width: 2;
  }

  .region-text {
    font-size: 21px;
    fill: #333333;
  }

}
