@import "Colors";
@import "Connector";

$end-state-color: #000000;
$end-state-background-color: #FFFFFF;
$end-state-size: 30px;
$end-state-border-radius: 32px;
$end-state-border: 1px solid $end-state-color;
$end-state-internal-size: 20px;
$end-state-internal-border-radius: 10px;

@mixin EndState {
  .end-state {
    .icon {
      margin-left: auto;
      margin-right: auto;
      display:block;
      background-color: $end-state-background-color;
      border: $end-state-border;
      width: $end-state-size;
      height: $end-state-size;
      border-radius: $end-state-border-radius;
      box-sizing: border-box;

      div.inner {
        background-color: $end-state-color;
        width: $end-state-internal-size;
        height: $end-state-internal-size;
        border-radius: $end-state-internal-border-radius;
        position: relative;
        top: 50%;
        left: 50%;
        margin-left: $end-state-internal-size / -2;
        margin-top: $end-state-internal-size / -2;
        border: 2px solid $initial-state-background-color;
        box-sizing: border-box;
      }
    }

    .name {
      margin-left: auto;
      margin-right: auto;
      display:block;
      white-space: nowrap;
      font-size: 12px;
      font-weight: bold;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      height: 16px;
      line-height: 16px;
    }

    .connector {
      @include connector_basics;

      &.left {
        top: ( $end-state-size - $connector-size ) / 2;
        left: 0;
      }

      &.right {
        top: ( $end-state-size - $connector-size ) / 2;
        left: $end-state-size;
      }

      &.top {
        top: $connector-size / -2;
        margin-left: $connector-size / -2;
        left: 50%;
      }

      &.bottom {
        top: $end-state-size - $connector-size / 2;
        margin-left: $connector-size / -2;
        left: 50%;
      }
    }
  }
}

@mixin SelectedEndState {
  .end-state {
    .icon {
      border-color: $selected-border-color;

      div.inner {
        border-color: $selected-border-color;
      }
    }
  }
}