@prefix: global-variable-chooser;

.@{prefix} {
  &- {
    &root {
      position: relative;
    }

    &varList {
      overflow: auto;
      height: 300px;
      margin-top: 10px;
    }

    &var {
      border-radius: 4px;
      padding: 4px;
      background-color: transparent;
      transition: all 300ms;
      cursor: pointer;

      &.@{prefix}-checked {
        background-color: rgba(17, 153, 255, 0.1);
        font-weight: bold;
      }

      &:hover {
        background-color: rgba(17, 153, 255, 0.2);
      }


      .@{prefix}-type-api {
        background-color: #f5a700;
      }

      .@{prefix}-type-var {
        background-color: #33AAff;
      }

      .@{prefix}-type-loading {
        background-color: #ff337a;
      }

      .@{prefix}-name {
        white-space: nowrap;
      }

      .@{prefix}-tag, .@{prefix}-method {
        padding: 0px 4px;
        border-radius: 4px;
        font-weight: bold;
        font-size: small;
        width: auto;
        height: auto;
        pointer-events: none;
        user-select: none;
      }


      .@{prefix}-url {
        white-space: nowrap;
        font-size: x-small;
        font-family: Consolas, "Courier New", "Microsoft Yahei", monospace;
      }
    }
  }
}