@prefix: variable-type;

.@{prefix} {
  &- {
    &root {
      position: relative;
      border-radius: 4px;
    }

    &overlay {
      border-radius: 4px;
      overflow: hidden;

      .@{prefix}-box:hover {
        filter: brightness(1.2);
      }
    }

    &box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 55px;
      //height: 20px;
      cursor: pointer;
      font-weight: bold;
      font-size: small;
      color: rgba(0, 0, 0, 0.65);
      user-select: none;
      filter: brightness(1);
      transition: all 300ms;
    }

    &string {
      background-color: #52b4e8;
    }

    &number {
      background-color: #a6d344;
    }

    &object {
      background-color: #ffa446;
    }

    &array {
      background-color: #dc3ae0;
    }

    &any {
      background-color: #1be0d9;
    }

    &boolean {
      background-color: #e88181;
    }
  }
}