@prefix: ruler-group;

@ruler-background-color: #DDD;

.@{prefix} {
  &- {
    &corner {
      position: absolute;
      top: 0;
      left: 0;
      background-color: @ruler-background-color;
      border-right: 1px solid #AAAAAA;
      border-bottom: 1px solid #AAAAAA;
      color: #666666;
      text-align: center;
      cursor: pointer;

      &:hover {
        color: #333333;
        background-color: #EEEEEE;
      }

      &:active {
        margin-top: 1px;
      }
    }

    &line {
      position: absolute;
      top: 0;
      left: 0;

      border-left: 2px solid #0091FF;
      border-top: 2px solid #0091FF;
      border-right: 0px solid transparent;
      border-bottom: 0px solid transparent;

      &-tip {
        position: absolute;
        top: 5px;
        left: 5px;
        padding: 1px 5px;
        font-size: 10px;
        border-radius: 4px;
        color: #0091FF;
        background-color: rgba(0, 145, 255, 0.0);
        transition: color 300ms, background-color 300ms;
        pointer-events: none;
      }

      &:hover {
        .@{prefix}-line-tip {
          color: #FFFFFF;
          background-color: rgba(0, 145, 255, 0.8);
        }
      }
    }

    &preview {
      pointer-events: none;
      border-style: dashed;
      border-top-width: 1px;
      border-left-width: 1px;
      border-color: rgba(0, 129, 255, 0.6);

      & .@{prefix}-line-tip {
        color: #FFFFFF;
        background-color: rgba(0, 145, 255, 0.6);
      }
    }
  }
}